使用 *ngFor 时打印相同的值答案

【问题标题】：Same value is getting printed when using *ngFor使用 *ngFor 时打印相同的值
【发布时间】：2021-04-15 20:33:15
【问题描述】：

我试图在迭代时获取每个项目的距离。

在下面的代码中，我得到了与(onResponse)="getDistance($event)"的距离

  <div *ngFor="let routes of places[0].routes" class="todo-thumbnail-area">
    <agm-map [zoom]="1">
      <agm-direction [origin]="routes.origin" [destination]="routes.destination" (onResponse)="getDistance($event)">
      </agm-direction>
    </agm-map>
    <div class="todo-price">One Way Trip Cost - {{ this.routeTotalDistance }}</div>
  </div>

在 Component.ts 中

  getDistance (event) {
    this.routeTotalDistance = event.routes[0].legs[0].distance.text;
  }

所以在控制台中，如果我打印 routeTotalDistance，我会看到每次迭代的不同值，但最后我看到所有项目的值相同。

我认为在最后一次迭代之后 routeTotalDistance 设置为最后一次迭代值。

如何解决这个逻辑问题？请指导。

【问题讨论】：

我不知道你的最终目标是什么，这是否回答了你的问题：this.routeTotalDistance += event.routes[0].legs[0].distance.text
如果我这样做，我会得到这个151 km151 km462 km462 km347 km347 km332 km332 km506 km506
@RachidO 我附上了一张图片供您参考
发生这种情况是因为this.routeTotalDistance 对整个组件都是全局的，相反，您需要为每条路线设置 routeTotalDistance
但是如何在迭代时为每个路由声明一个变量？

标签： angular typescript ngfor

【解决方案1】：

我认为在最后一次迭代之后 routeTotalDistance 设置为最后一次迭代值。

你是对的：每次调用 getDistance 时，routeTotalDistance 变量都会被覆盖。你可以做的是将routeTotalDistance 设为一个数组：

<div *ngFor="let routes of places[0].routes; let i = index" class="todo-thumbnail-area">
<agm-map [zoom]="1">
  <agm-direction [origin]="routes.origin" [destination]="routes.destination" (onResponse)="getDistance($event, i)">
  </agm-direction>
</agm-map>
<div class="todo-price">One Way Trip Cost - {{ this.routeTotalDistances[i] }}</div>

routeTotalDistances: string[] = [];

...

getDistance (event, i) {
    this.routeTotalDistances[i] = event.routes[0].legs[0].distance.text;
}

【讨论】：

我收到此错误ERROR TypeError: Cannot read property '0' of undefined
@HighwayCabs 你如何声明你的routeTotalDistances 变量？不要忘记将其初始化为一个空数组，例如 routeTotalDistances: string[] = [];