如何将此Angular js代码转换为Angular 6语法？

Question

我们正在尝试在行内放置动态数据。每行有3列。我们找到了看起来像我们需要的有角度的js代码。关键是我们使用的是角度6。如何将这个角度js代码转换为角度？

  

    

        

             {{persons [$ index] .name}}  {{persons [$ index] .age}} 
            
        
        

             {{persons [$ index +
                1] .name}}  {{persons [$ index + 1] .age}}  
        
        

             {{persons [$ index +
                2] .name}}  {{persons [$ index + 2] .age}}  
        
    

 

谢谢！

Answer 1

我会做这样的事情：

<div class="row" *ngFor="let person of persons; let i = index" *ngIf="i % 3 === 0">

通过将每个$index替换为i，并将每个ng-if替换为*ngIf，可以重复其余的步骤。 您还可以查看ngIf和ngFor语法here。

Answer 2

假设您的控制器已正确设置并链接到此模板，则此方法应该起作用：

<div class="container">
  <div class="row" *ngFor="let person of persons; let i = index" *ngIf="i % 3 == 0">
      <div class="col-md-4 col-md-offset-1">
          <button class="btn btn-info btn-lg btn-block">{{person.name}} <span class="badge">{{person.age}}</span>
          </button>
      </div>
      <div class="col-md-4 col-md-offset-2">
          <button class="btn btn-success btn-lg btn-block" *ngIf="persons[$index + 1].name != null">{{persons[i +
              1].name}} <span class="badge">{{persons[i + 1].age}}</span></button>
      </div>
      <div class="col-md-4 col-md-offset-3">
          <button class="btn btn-success btn-lg btn-block" *ngIf="persons[i + 2].name != null">{{persons[i +
              2].name}} <span class="badge">{{persons[i + 2].age}}</span></button>
      </div>
  </div>
</div>