使用 ngFor 生成 table 时出现问题？

Question

我需要使用 Json 对象数组中的信息创建一个 table。假设数据以如下格式到达。

profiles = [{
        id: 1,
        userId:1000,
        profile: "Cars 2018",
        parentId: 0,
        created: "00.00.0000 00:00:00",
        fields: [
                    {id:1, type:"text", name: "Brand"},
                    {id:2, type:"decimal", name: "velocity"},
                    {id:3, type:"int", name: "leather"}
        ],
        data: [
            { id:1, value:'BMW 2018', profileId:1, fieldId:1  },
            { id:2, value:'130 Km/h', profileId:1, fieldId:2 },
            { id:3, value:'Yes', profileId:1, fieldId:3 },
            { id:4, value:'Mercedez Benz 2018', profileId:1, fieldId:1  }, 
            { id:5, value:'180 Km/h', profileId:1, fieldId:2 },
            { id:6, value:'No', profileId:1, fieldId:3 }
        ]
    }];

到目前为止一切都很简单，我可以这样做然后继续......

<div *ngFor="let field of profiles">
   <table>
     <thead>
        <tr>
          <th *ngFor="let link of field.fields">
              {{ link.name }}
          </th>
        </tr>
     </thead>
     <tbody>
       <tr>
         <td *ngFor="let dt of field.data">
            {{ dt.value }}
         </td>
       </tr> 
     </tbody>
   </table>
</div>

但结果会是：

Brand     |  Velocity   | Leather |
BMW 2018  |   130 Km/h  |  Yes    | Mercedez Benz 2018  | 130 Km/h | No

如何让数据适应列数？

更新-------- 我在数据中添加了 'fieldId'，所以数据应该显示在它们对应的字段中...

Answer 1

您应该修改代码中的数据，使其成为您实际想要显示的内容。您可以很容易地为此使用数组映射运算符：

profiles = profiles.map(profile => {
    profile.data = profile.data.filter(d => !!profile.fields.find(f => f.id === d.id));
    return profile;
});

您不想在模板中尝试此逻辑，因为模板逻辑应该尽可能简洁明了。您的工具/功能在代码方面要强大得多。

如果这是通过 observable 实现的，您可以在 rx 映射运算符中使用数组映射运算符

Answer 2

只需操作来自组件的数据 class。

试试这个

let profiles = [{
        id: 1,
        userId:1000,
        profile: "Cars 2018",
        parentId: 0,
        created: "00.00.0000 00:00:00",
        fields: [
                    {id:1, type:"text", name: "Brand"},
                    {id:2, type:"decimal", name: "velocity"},
                    {id:3, type:"int", name: "leather"}
        ],
        data: [
            { id:1, value:'BMW 2018', profileId:1  },
            { id:2, value:'130 Km/h', profileId:1 },
            { id:3, value:'Yes', profileId:1 },
            { id:4, value:'Mercedez Benz 2018', profileId:1  },
            { id:5, value:'180 Km/h', profileId:1 },
            { id:6, value:'No', profileId:1 }
        ]
    }]; 
//Create a buffer for current data
let dataTable = profiles;
let index = 0;
for(let x of profiles){
//Create a data container
  let data = [];
//Number of iterations base on the header
  let iterations = x.data.length / x.fields.length;

  for(let r = 0; r < iterations; r++){
      data.push(dataTable[index].data.splice(0, x.fields.length));
  }

//Equate it since array are mutable
  x.data = data;
  index++;
}

然后在你的html文件中这样做

<div *ngFor="let field of profiles">
   <table>
     <thead>
        <tr>
          <th *ngFor="let link of field.fields">
              {{ link.name }}
          </th>
        </tr>
     </thead>
     <tbody>
       <tr *ngFor="let dt of field.data">
         <td *ngFor="let y of dt">
            {{ y.value }}
         </td>
       </tr> 
     </tbody>
   </table>

使用 ngFor 生成 table 时出现问题？

problems generating table with ngFor?

html

json

ngfor

angular