![](/img/trans.png)
[英]Angular 2 - Local Variable/Template Reference Variable with *ngIf - ONLY first element of array not binding
[英]Add template reference variable attribute to element if first Angular
我有一个大型导航菜单,它是通过循环来自服务器的 JSON 响应制成的。 我想将#first 模板引用变量添加到第一个 a 标签。 (这样我就可以从它的父组件访问它,如果用户使用键盘选择大型导航的那部分,我可以将焦点添加到该链接;使其可访问。)下面不起作用。 你怎么做到这一点?
<li *ngFor="let item of subMenu.items; let itemIndex=index;">
<a (click)="linkMegaClicked($event)"
[routerLink]="item.url"
[#first]="itemIndex == 0"
[innerHtml]="item.link_text">
</a>
</li>
我不认为你可以动态添加它(你也不能用指令来做到这一点)所以恐怕你需要创建 2 个 html 标签。
<li *ngFor="let item of subMenu.items; let i = index;">
<a
#first
*ngIf="i === 0"
[routerLink]="item.url"
[innerHtml]="item.link_text"
(click)="linkMegaClicked($event)">
</a>
<a
*ngIf="i !== 0"
[routerLink]="item.url"
[innerHtml]="item.link_text"
(click)="linkMegaClicked($event)">
</a>
</li>
如果有办法,我相信有人会纠正我,但据我所知,这将是正确的方式。
您将需要编写条件来实现这种情况。 我更喜欢使用容器和模板来使代码更具可读性。 您可以检查 ngFor 的第一个属性而不是索引。
<li *ngFor="let item of subMenu.items; first as isFirst">
<ng-container *ngIf="isFirst; else otherItem">
<a #first
[routerLink]="item.url"
[innerHtml]="item.link_text"
(click)="linkMegaClicked($event)">
</a>
</ng-container>
<ng-template #otherItem>
<a *ngIf="i !== 0"
[routerLink]="item.url"
[innerHtml]="item.link_text"
(click)="linkMegaClicked($event)">
</a>
</ng-template>
</li>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.