Как создать динамический вид сетки в angular с помощью ant design?

#angular #grid #ng-zorro-antd

Вопрос:

У меня есть один дочерний компонент, который имеет вид дизайна видеокарты, подобный этому, введите описание изображения здесь

в родительском компоненте мне нужно вызвать этот дочерний компонент, чтобы сформировать представление динамической сетки. Также мне нужно передать такие данные, как название карточки, изображения, описание и т.д., От родительского компонента к дочернему. Пожалуйста, помогите, я в этом новичок.

Ответ №1:

Допустим, вы получаете свой список карт с помощью API. В итоге вы получите Observable<CardData> тип «где CardData «, который содержит ваш заголовок, URL-адрес изображения, описание и т. Д…

 @Component({
   selector: 'my-app',
   template: '<your-card *ngFor="let card of cards | async" [data]="card"></your-card>'
})
export class AppComponent  {
  cards$: Oservable<CardData>;
}
 

Затем вы можете использовать CSS-сетки.