如何在 Angular 中使用 ngFor 设置动态索引元素？答案

【问题标题】：How to set dynamic index element using ngFor in Angular?如何在 Angular 中使用 ngFor 设置动态索引元素？
【发布时间】：2022-01-10 20:25:13
【问题描述】：

我想在 NgFor Angular 中使用索引来处理动态属性。

我有一组类似的属性/接口。

vehicle1_Name,
vehicle2_Name,
vehicle3_Name
vehicle4_Name,
totalVehCount

像这样，我正在使用带有 totalVehCount 的 for 循环。

numVehicle(n: number): Array<number> {
    return Array(n);
  }

<i class="fa fa-car" *ngFor="let veh of numVehicle(qt.totalVehCount);let indexOfelement=index;"></i>

它工作正常，但我想像这样动态打印标题/工具提示。

<i class="fa fa-car" title="{{qt.vehicle[indexOfelement+1]_Name}}" 
                                *ngFor="let veh of numVehicle(qt.totalVehCount);let indexOfelement=index;"></i>

我该怎么做？

例如如果totalVehCount = 1 那么它应该像这样打印

 <i class="fa fa-car" title="{{qt.vehicle1_Name}}"></i>

如果 totalVehCount = 2 那么它应该像这样打印：

<i class="fa fa-car" title="{{qt.vehicle1_Name}}"></i>
<i class="fa fa-car" title="{{qt.vehicle2_Name}}"></i>

【问题讨论】：

你可以试试字符串插值。 qh.[vehicle${Indexofelement+1}_Name]
@BekaKalandadze title="{{qt.[vehicle${indexOfelement+1}_Name]}}" 像这样？不工作！
对不起。我无法编写正确的解决方案，您需要在车辆前面和名称之后放置反引号 - 这是一个反引号`

标签： angular typescript for-loop ngfor angular10

【解决方案1】：

以当前的方式，您的数据是基于多个单独的属性构建的，您很难对其进行迭代。我建议将数据（或映射）作为数组获取，例如

vehicles = [{ name: "Toyota"}, { name: "BMW"}, { name: "Honda"}, { name: "Fiat"}]

如果您需要保持原始属性不变，您可以执行以下操作来创建数组

vehicles = [vehicle1_Name,vehicle2_Name,vehicle3_Name,vehicle4_Name].map(name => { name });

然后在模板中你可以迭代数组

<ng-container *ngIf="let vehicle of vehicles">
  <i class="fa fa-car" [title]="vehicle.name"></i>
</ng-container>

这可能不是您需要的确切答案。由于它是动态的，您可能需要对数据进行不同的映射（在您的问题中尚不清楚动态的方式）。但这里的主要建议是使数据具有便于您使用的结构。

【讨论】：