Question

我需要创建一个基于两个循环的表。我尝试过以下方法：

var elem = document.getElementById('frame');
elem.className = "someclassname";

我知道我收到了数据，因为我已经<tbody *ngIf="testCases"> <tr class="pointer" *ngFor="let car of cars; let bike of bikes"> <td class="center">{{car?.id}}</td> <td class="center">{{bike?.id}}</td> </tr> </tbody>使用typescript进行了尝试，但当我在console.log中显示时，我打印HTML以获取自行车

Answer 1

您可以使用<ng-container>。它是一个帮助元素，允许使用*ngFor，*ngIf或其他结构指令，但实际上并不创建HTML内容。

<ng-container *ngFor="let car of cars">
  <tr class="pointer" *ngFor="let bike of bikes"> 
    <td>{{car.id}} {{bike.id}}</td>
  </tr>
</ng-container>

Answer 2

如果两者都有相同的记录，则可以像

那样进行

<tr class="pointer" *ngFor="let car of cars; let i = index;">
    <td class="center">{{cars[i]?.id}}</td> // or <td class="center">{{car?.id}}</td>
    <td class="center">{{bikes[i]?.id}}</td>
</tr>

Answer 3

在你的打字稿代码中你可以这样做：

vehicles = (<any[]>cars).concat(<any>[bikes]);

然后在您的视图中，您可以轻松地绑定它：

<tr class="pointer" *ngFor="let vehicle of vehicles">
  <td *ngIf="vehicle.vehicleType === 'car'" class="center">{{vehicle.id}} is car</td>
  <td *ngIf="vehicle.vehicleType === 'bike'" class="center">{{vehicle.id}} is bike</td>
</tr>

Answer 4

您不能在同一行上使用，请将其作为单独的行

<tbody *ngIf="testCases">
  <tr class="pointer" *ngFor="let car of cars ">
    <td class="center">{{car?.id}}</td>
   </tr>
  <tr class="pointer" *ngFor="let bike of bikes">
    <td class="center">{{bike?.id}}</td>
  </tr>
</tbody>

修改

如果你想在同一行使用 index ，它将保存数组值

<tr class="pointer" *ngFor="let car of cars; let x = index;"> <td class="center">{{cars[x]?.id}}</td> <td class="center">{{bikes[x]?.id}}</td> </tr>

在表格中加倍* ngFor - Angular 2

4 个答案: