me sale el error
El tipo 'cadena' no se puede asignar al tipo 'Diseño de tarjeta postal'
Tengo un componente principal llamado page-blog.component.html el que estoy configurando los estilos de clase y pasándolos al componente secundario llamado post-card.component.ts
En mi componente HTML principal, cuando trato de establecer las variables de estilo de clase del componente de clase es cuando me sale un error. Ocurriendo con el @Input() layout: PostCardLayout; sección.
Encontré lo que sentiría como una solución sucia, pero probablemente me permitirá cometer más errores en el futuro ingresando al archivo tsconfig.json y configurando "strictInputTypes": false,
Clase post-card.component.ts
import { Component, HostBinding, Input } from '@angular/core'; export type PostCardLayout = 'list' | 'grid' | 'grid-sm'; @Component({ selector: 'app-post-card', templateUrl: './post-card.component.html', styleUrls: ['./post-card.component.scss'] }) export class PostCardComponent { @Input() post; @Input() layout: PostCardLayout; @HostBinding('class.post-card') classPostCard = true; @HostBinding('class.post-card--layout--list') get classPostCardLayoutList(): boolean { return this.layout === 'list'; } @HostBinding('class.post-card--layout--grid') get classPostCardLayoutGrid(): boolean { return this.layout === 'grid'; } @HostBinding('class.post-card--layout--grid-sm') get classPostCardLayoutGridSm(): boolean { return this.layout === 'grid-sm'; } constructor() { } } Aquí está la page-blog.component.html
<div class="posts-list__body"> <div *ngFor="let post of posts" class="posts-list__item"> <app-post-card [post]="post" [layout]="{ classic: 'grid', list: 'list', grid: 'grid-sm' }" ></app-post-card> </div> </div>Ha escrito su PostCardLayout para aceptar uno de estos tres valores:
'list' | 'grid' | 'grid-sm'Está intentando pasar un objeto JSON:
[layout]="{ classic: 'grid', list: 'list', grid: 'grid-sm' }[layout]" También parece haber un error tipográfico en el sentido de que hay un [layout] adicional al final de su entrada.
Supongo que entre el error tipográfico y la desactivación de los tipos de entrada estrictos, su JSON se está transformando en una cadena.
usar "strictInputTypes": false es una idea terrible ya que anula uno de los propósitos básicos de TypeScript.
Por lo que puedo decir de su código, simplemente desea asignar uno de los tres valores predefinidos:
<app-post-card [post]="post" [layout]="'grid'"> </app-post-card>