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']

我发现某些问题我堆栈溢出 resource

Dynamic routerLink value from ngFor item giving error "Got interpolation ({{}}) where expression was expected"

zhry0203203 回答:ngFor Angular 8项目的动态routerLink值

尝试使用[routerLink]="'../'+factors"routerLink="{{'../'+factors}}"

Working Demo

.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>
,

您正在[routerLink]="'../factors'"中使用字符串来使其工作

[routerLink]="'../factors'"替换为[routerLink]="['../'+factors]"

,

使用

[routerLink]="`../${factors}`"
,

[routerLink]需要模型名称,但是您将../factors作为字符串传递,因此它将不起作用,相反,您可以尝试这样。

<a routerLink="../{{factors}}"> </a>

希望这会有所帮助。

本文链接:https://www.f2er.com/3112503.html

大家都在问