Question

我在html Card内两次使用* ngFor，以显示来自不同列表/数组的数据，并且工作正常，但是我正在使用“ let car of service.listInfoCar”的秒* ngFor显示每个项目在我的html中两次。
HTML：

<div class="mytittle"></div>
<div class="mycards" *ngFor="let car of service.listTypeCar;" class="card" style="width: 60rem; height: 20rem;">
      <img src="{{imageUrl}}" class="card-img-top" alt="...">
   <div class="card-body">
     <h2 class="card-title">{{car.CarType1}}</h2>
     <div class="row">
        <div>
          Model : {{car.Model}}
        </div>
        <div class="itemtwo">
          Gear :  {{car.Gear}}
        </div>
     </div>
     <div class="row">
        <div>
          Price :  {{car.PriceForDay}}
        </div>
        <div class="itemtwo">
           Late pay : {{car.LatePay}} 
        </div>
     </div>
     <div class="secoundNg" *ngFor="let car of service.listInfoCar">
     <div class="row">
        <div>
         Available :  {{car.CanRent}}
        </div>
        <div class="itemtwo">
           Car number : {{car.CarNumber}}
        </div>
     </div>
     <div class="row">
        <div>
            Location: {{car.Location}}
        </div>
        <div class="itemtwo">
           Distance : {{car.Distance}}
        </div>
     </div>
     <div class="row">
        <div>
            Year : {{car.YearMade}}
        </div>
     </div>
     </div>
     <a href="#" class="btn btn-primary">Go somewhere</a>
   </div>
 </div>

结果：

HTML RESULT

Answer 1

我在这里没有发现任何问题。您有嵌套循环。

首先将遍历service.listTypeCar，在此内部，您还有另一个ngFor遍历service.listInfoCar。

我假设listTypeCar和listInfoCar的每辆车都有匹配的索引。

在这种情况下，您需要做的是：

首先使用ngFor获取索引

*ngFor="let car of service.listTypeCar; let index"

然后更改第二个* ngFor

来自此

*ngFor="let car of service.listInfoCar"

对此

*ngIf="service.listInfoCar[index]; let car"

角度使用* ngFor时我的数据显示两次

1 个答案: