语法* ngFor ='...'angular 2

时间:2016-07-19 09:24:52

标签: angular

请帮助语法。 我会解析两个对象(在表格中显示数据) - >

    <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>

如何结合(使用语法)list.servicelict&amp; list.storagelist,

我有错误“NaN undefined”

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>

当我添加

<template>...</template>

行中的数据“Названиесервиса”&amp; “Статус”不见了

 [
  {"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
     }
  ]

此错误 - &gt; click

1 个答案:

答案 0 :(得分:1)

你不能在同一个元素上有两个结构指令(2 x let getDateEvent = String(extractData.valueForKey("date")!) print(getDateEvent) let dateFormatter = NSDateFormatter() dateFormatter.dateFormat = "yyyy-MM-dd'T'HH:mm:ssZZZZZ" let date = dateFormatter.dateFromString(getDateEvent) dateFormatter.dateFormat = "eeee, MMM d"///this is you want to convert format let timeStamp = dateFormatter.stringFromDate(date!) print(timeStamp) ) 如果您需要多个,则需要使用带有明确*ngFor标记的表单:

<template>