Question

我在使用尖角的.html文件中保存了这段代码

    <div id="container">
     <div class="row triple" *ngFor="let j of jugadores">
      <div class="column-3 left">{{j.nombre}}</div>
      <div class="column-3 center">{{j.nombre}}</div>
      <div class="column-3 right">{{j.nombre}}</div>
     </div>
    </div>

问题是我想在列中输入不同的名称。我怎样才能使* ngFor做到这一点？

enter image description here

Answer 1

您可以这样做

如果nombre是字符串，并且您想要在其他列中显示值：

已更新

    <div id="container">
             <div class="row triple" *ngFor="let j of jugadores;let i=index">

                  <div class="column-3 left" *ngIf="(i+1)%3 === 1">{{j.nombre}}</div>
                  <div class="column-3 center" *ngIf="(i+1)%3 === 2">{{j.nombre}}</div>
                  <div class="column-3 right" *ngIf="(i+1)%3 === 0">{{j.nombre}}</div>

             </div>
          </div>

或者如果您想在不同的列中显示数组的字段

 <div id="container">
         <div class="row triple" *ngFor="let j of jugadores">
              <div class="column-3 left" >{{j.nombre}}</div>
              <div class="column-3 center" >{{j.dorsal}}</div>
              <div class="column-3 right" >{{j._links}}</div>
         </div>
      </div>

Answer 2

在这种情况下，您需要一个嵌套循环来迭代nombre的元素。示例：

<div id="container">
     <div class="row triple" *ngFor="let j of jugadores">
      <ng-container *ngFor="let name of j.nombre">
        <div class="column-3 left">{{name}}</div>
      </ng-container>
      <div class="sample">{{j.someOtherProperty}}</div>
     </div>
</div>

您可以使用ng-container来避免仅将新的html元素用于循环。

Answer 3

迭代jugadores数组

<div id="container" class="row">
  <div [class]="getClass(i)" *ngFor="let j of jugadores; let i = index">
    {{ j.nombre }}
  </div>
</div>

getClass函数获取当前index的类

// in component

  getClass(i){
    let className = 'col-4 ';
    switch(i%3){
      case 0: className += 'left'; break;
      case 1: className += 'center'; break;
      case 2: className += 'right'; break;
    }
    return className;
  }

工作示例stackblitz

ngFor具有不同属性的列

3 个答案: