Question

我做了10个div类

  <div class="col-md-2 full_detail_div">
    <div class="row user_detail_row2">
      <div class="col-md-4 col-sm-2 col-xs-2 user_detail_div">
        <label> Name:</label>
      </div>
      <div class="col-md-8 col-sm-4 col-xs-4 user_detail_div">
        {{dealerDetails.name}}
      </div>
    </div>
  </div>
</div>
  <div class="col-md-2 full_detail_div">
    <div class="row user_detail_row2">
      <div class="col-md-4 col-sm-2 col-xs-2 user_detail_div">
        <label> Name:</label>
      </div>
      <div class="col-md-8 col-sm-4 col-xs-4 user_detail_div">
        {{dealerDetails.name}}
      </div>
    </div>
  </div>
</div>

如果用户从后端发送5，我必须在前端显示5

那我应该使用哪种逻辑？我必须使用*ngFor还是其他方式？

Answer 1

使用ngFor指令重复该视图。就像for循环一样，它会在数组上进行迭代。该指令也做同样的事情。

将API响应存储到dealerDetails变量中到ts文件中。然后ngFor将根据响应显示视图。

<div *ngFor="let dealerDetail of dealerDetails">
      <div class="col-md-2 full_detail_div">

         <div class="row user_detail_row2">  

           <div class="col-md-4 col-sm-2 col-xs-2 user_detail_div">

             <label> Name:</label>

           </div>

           <div class="col-md-8 col-sm-4 col-xs-4 user_detail_div">

             {{dealerDetail.name}}

          </div>

        </div>
      </div>
    <div>

如果我使用* ngFor，那么应该使用哪种条件？

1 个答案: