[英]Angular8 / NG-ZORRO 8: Binding in ng-template of nzAction
Im using angular 8 with ng-zorro version 8.2.1. 我在ng-zorro版本8.2.1中使用angular 8。
I have a nz-card see https://ng.ant.design/components/card/en repeated by a *ngFor . 我有一个nz卡,请参阅https://ng.ant.design/components/card/en,并重复* ngFor 。 For the actions, I need to access the property of *ngFor but it turns out that I can't access that from within the template.
对于操作,我需要访问* 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>
When executing the code above, I get the following js error 执行上面的代码时,出现以下js错误
TypeError: Cannot read property 'id' of undefined
TypeError:无法读取未定义的属性“ id”
Unfortunately, I couldnt find any solution to solve the issue so I came up with the following workaround: 不幸的是,我找不到任何解决此问题的解决方案,因此提出了以下解决方法:
Store the data inside the html with [attr.boxid]="box._id" 使用[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>
Call a generic Function with event handler when clicking on the action with (click)="actionDetails($event)" 使用(click)=“ actionDetails($ event)”单击操作时,使用事件处理程序调用通用函数
<ng-template #boxActionDetails>
<i nz-icon nzType="unordered-list" (click)="actionDetails($event)"></i>
</ng-template>
Inside the action, iterate via the even target up to the parent which contains the data and use is for further processing. 在操作内部,通过偶数目标迭代直到包含数据的父对象,并将其用于进一步处理。
actionDetails(event) {
var target = event.target || event.srcElement || event.currentTarget;
var boxid = target.parentNode.parentNode.parentNode.parentNode.parentNode.attributes.boxid.nodeValue;
}
You can declare the ng-template
in the loop body, like this: 您可以在循环主体中声明
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.