構文* ngFor = '...'角度2

Question

構文のヘルプをお願いします。 私は、2つのオブジェクト（テーブル内のデータを表示）を解析するだろう - & list.storagelist list.servicelict（構文で）結合する方法>

<tbody> 
     <tr *ngFor="let service_rec of list.servicelist" *ngFor= "let service_rec of list.storagelist"> 
      <td> {{ service_rec.name }} </td> 
      <td> {{ service_rec.status }}</td> 
      <td>{{ service_rec.total | byteFormat }}</td> 
      <td>{{ service_rec.used | byteFormat }}</td> 
      <td>{{ service_rec.free | byteFormat }}</td> 
     </tr> 
    </tbody> 

、

私はエラーを持っている

"NaNで未定義" UPD：私は追加

<div class="panel-header text-center"> 
    <h1> Тест блок </h1> 
</div> 

<div class="row" *ngFor="let list of lists"> 
<div class="col-md-6"> 
    <table class="table table-bordered"> 
     <caption>{{ list.nodename }}</caption> 
     <thead> 
      <tr> 
       <th rowspan="2" style="text-align: center;">Название сервиса</th> 
       <th rowspan="2" style="text-align: center;">Статус</th> 
       <th colspan="3" style="text-align: center;">Файловая система</th> 
      </tr> 
      <tr> 
       <th>Всего</th> 
       <th>Использовано</th> 
       <th>Доступно</th> 
      </tr> 
     </thead> 
     <tbody> 
      <template ngFor let-service_rec [ngForOf]="list.servicelist"> 
      <tr *ngFor= "let service_rec of list.storagelist"> 
       <td> {{ service_rec.name }} </td> 
       <td style="width: 15%"> 
        <span [style.background-color]="service_rec.status == 'Online' ? 'green' : 'red'" class="label label-default"> 
         {{ service_rec.status }} 
        </span> 
       </td> 
       <td>{{ service_rec.total | byteFormat }}</td> 
       <td>{{ service_rec.used | byteFormat }}</td> 
       <td>{{ service_rec.free | byteFormat }}</td> 
      </tr> 
      </template> 
     </tbody> 
    </table> 
</div> 
</div> 

"Названиесервиса" & "Статус" 行の0

<template>...</template> 

データは

[ 
    {"nodename":"192.124.105.55", 
    "servicelist":[ 
     { 
     "id":"ec9471ec001c10b9fa286e1f52e39c5dc9485a7c2cfbf55145c26242bb98ec4d", 
     "name":"Nginx", 
     "status":"Online", 
     "servicecontrolled":true 
     }, 
     { 
      "id":"f4ca9e0badc6b23e3e36444bd7ee4a9efcd39de8e0bb4cdecb25b5a02ef86ba5", 
      "name":"Memcached", 
      "status":"Offline", 
     "servicecontrolled":true   
     }, 
     { 
      "id":"0a4bf3b5bb5f47ece9284052389ae02f6c9dba989ca34086a30e049ee3d8eb47", 
      "name":"Celery", 
      "status":"Offline", 
     "servicecontrolled":true 
     } 
    ], 
    "storagelist": 
    [ 
    { 
     "mountpoint":"/", 
     "total":188, 
     "used":28, 
     "free":161 
    }, 
    { 
     "mountpoint":"/boot", 
     "total":235, 
     "used":106, 
     "free":129 
    } 
    ] 

このエラーをなくなっている - >

Answer 1

あなたは同じ要素上の2つの構造ディレクティブを持つことができない（2×*ngFor ） 複数のタグが必要な場合は、明示的な<template>タグを持つフォームを使用する必要があります。

<tbody> 
    <template ngFor let-service_rec [ngForOf]="list.servicelist"> 
    <tr *ngFor= "let service_rec of list.storagelist"> 
     <td> {{ service_rec.name }} </td> 
     <td> {{ service_rec.status }}</td> 
     <td>{{ service_rec.total | byteFormat }}</td> 
     <td>{{ service_rec.used | byteFormat }}</td> 
     <td>{{ service_rec.free | byteFormat }}</td> 
    </tr> 
    </template> 
</tbody>