javascript - ngFor 项目 Angular 8 的动态 routerLink 值
问题描述
我正在尝试使用 [routerLink] 从 NgFor 路由动态值。
<li class="list-group-item d-flex justify-content-between align-items-center"
*ngFor="let factors of factorsList">
<span>{{factors | titlecase}}</span>
<a [routerLink]="'../factors'" class="btn btn-primary btn-sm">Reset <span class="sr-only">{{factors}}</span></a>
</li>
该代码应生成如下等效代码
<li class="list-group-item d-flex justify-content-between align-items-center">
Google
<a [routerLink]="['../google']" class="btn btn-primary btn-sm">Reset <span class="sr-only">google</span></a>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
YubiKey
<a [routerLink]="['../yubikey']" class="btn btn-primary btn-sm">Reset <span class="sr-only">yubi
key</span></a>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Backup codes
<a [routerLink]="['../backupcode']" class="btn btn-primary btn-sm">Reset</a>
</li>
但由于某些原因,价值因素并没有被取代[routerLink]="'../factors'"
组件类
export class MfaResetComponent implements OnInit {
mfaApp = MfaApp
public factorsList: string[] = [];
constructor(private genericHttpClientService: GenericHttpClientService) { }
ngOnInit() {
this.getResetFactors();
}
getResetFactors() {
this.genericHttpClientService.GenericHttpGet<FactorsViewModel[]>(`url`).subscribe(item => {
this.factorsList = [...new Set(item.filter(factor => factor.status == MultiFactorAuthenticationEnrolmentStatus.Enrolled).map(factor => factor.provider))];
})
}
}
列表因素将是
this.factorsList = ['Google','okta','Yubikey','BackupCode']
我发现的一些问题我堆栈溢出 来自 ngFor 项的动态 routerLink 值,给出错误“得到插值({{}}),其中表达式是预期的”
解决方案
尝试使用[routerLink]="'../'+factors"
或routerLink="{{'../'+factors}}"
.ts
factorsList = ["about","services"]
.html
<li class="list-group-item d-flex justify-content-between align-items-center" *ngFor="let factors of factorsList">
<span>{{factors | titlecase}}</span>
<a [routerLink]="'../'+factors" class="btn btn-primary btn-sm">Reset <span class="sr-only">{{factors}}</span></a>
</li>
推荐阅读
- cryptography - web2py 无法导入 pymysql 0.9.2:没有名为 cryptography.hazmat.backends 的模块
- javascript - 扩展网站 UI 以显示第三方内容
- kubernetes - coredns 无法正确解析服务名称
- javascript - 如何将字符串与多个变量匹配?
- javascript - 将 Angular 6 更新为 Angular 7 出错
- spring - @Transactional 不起作用,而 DefaultTransactionDefinition 起作用
- matplotlib - matplotlib 可以在 python3 中显示,但不能在 pyhon2 中显示
- spss - 在文件中保存变量列表
- javascript - 更新jQuery范围滑块的值
- reactjs - 有人可以破解 React Native 或任何传统 JS Native 应用程序的 API 调用吗