如何解决坚持执行 Angular 结构指令来表示数据列表
我一直在尝试以“卡片列表”的形式实现对象列表。我正在尝试做一些类似于 MatTables 的事情,您可以在其中定义行和该行的每一列。
我想要实现的是这样的:
<app-card-list card-list [dataSource]="dataSource">
<ng-container appCardItemNameDef="select">
<div *appCardItemDef="let row">
<input type="checkbox">
</div>
</ng-container>
<!-- Item Definitions -->
<ng-container [appCardItemNameDef]="column" *ngFor="let column of displayedColumns">
<div *appCardItemDef="let row"> {{ row[column] }} </div>
</ng-container>
<!-- Card declaration -->
<div class="flex flex-row" *appCardDef="let row; columns: displayedColumnsNames"></div>
</app-card-list>
渲染成类似卡片列表的东西:
我认为结构指令是一个完美的用例,因为它可以让我以更灵活的方式设置每个元素的样式。
谁能指出我正确的方向?
非常感谢您。
我将在这里进行测试的 Stackblitz 链接留在这里:
https://stackblitz.com/edit/angular-ivy-4hszzd?file=src%2Fapp%2Fapp.component.ts
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。