时间戳

首页 > 解决方案 > 使用 *ngFor 时打印相同的值

angular - 使用 *ngFor 时打印相同的值

问题描述

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

请参阅此图片以了解问题

在下面的代码中，我得到了距离(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设置为最后一次迭代值。

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

标签： angulartypescriptngfor

解决方案

我认为在最后一次迭代之后 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;
}

推荐阅读