angular - 如何使用蚂蚁设计以角度创建动态网格视图？

Question

我有一个子组件，它有一个像这样的新西兰卡设计视图，

在父组件中，我需要调用这个子组件来形成动态网格视图。我还需要将卡片标题、图像、描述等数据从父组件传递到子组件。请帮忙，我是新手。

标签： angulargridng-zorro-antd

Answer 1

假设您使用 API 获取卡片列表。您最终会得到一个Observable<CardData>whereCardData类型，其中包含您的标题、图片 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 网格。