Angular8 / NG-ZORRO 8：在 nzAction 的 ng-template 中绑定答案

【问题标题】：Angular8 / NG-ZORRO 8: Binding in ng-template of nzActionAngular8 / NG-ZORRO 8：在 nzAction 的 ng-template 中绑定
【发布时间】：2019-08-31 11:14:43
【问题描述】：

我使用 Angular 8 和 ng-zorro 版本 8.2.1。

我有一张 nz-card，请参阅 https://ng.ant.design/components/card/en，由 *ngFor 重复。对于这些操作，我需要访问 *ngFor 的属性，但事实证明我无法从模板中访问它。

<ng-template #boxActionDetails>
    <p>{{box.id}}</p>
</ng-template>
<nz-card *ngFor="let box of boxes" nzTitle="{{box.title}}" [nzActions]="[boxActionDetails]">
     <p>{{box.description}}</p>
</nz-card>

执行上述代码时，出现如下js错误

TypeError: 无法读取未定义的属性“id”

【问题讨论】：

标签： angular angular8 ng-zorro-antd

【解决方案1】：

您可以在循环体中声明ng-template，如下所示：

<nz-card *ngFor="let item of [true, true, true]; index as i"
         nzTitle="Card title" 
         [nzActions]="[action]">
  <p>Card content</p>
  <p>Card content</p>
  <p>Card content</p>
  <ng-template #action>
   <button nz-button>{{i}}</button>
  </ng-template>
</nz-card>

Live DEMO

【讨论】：

【解决方案2】：

不幸的是，我找不到任何解决方案来解决这个问题，所以我想出了以下解决方法：

使用 [attr.boxid]="box._id"

将数据存储在 html 中

<nz-card *ngFor="let box of boxes" nzTitle="{{box.title}}"
            [nzActions]="[boxActionLearn, boxActionEdit, boxActionDetails, boxActionDelete]" class="box" [attr.boxid]="box._id">
            <p>{{box.description}}</p>

使用(click)="actionDetails($event)"

点击动作时调用带有事件处理程序的通用函数

<ng-template #boxActionDetails>
        <i nz-icon nzType="unordered-list" (click)="actionDetails($event)"></i>
</ng-template>

在动作内部，通过偶数目标迭代到包含数据的父级，并用于进一步处理。

actionDetails(event) {
    var target = event.target || event.srcElement || event.currentTarget;
    var boxid = target.parentNode.parentNode.parentNode.parentNode.parentNode.attributes.boxid.nodeValue;
}

【讨论】：