用 ngFor 生成表的问题？答案

【问题标题】：problems generating table with ngFor?用 ngFor 生成表的问题？
【发布时间】：2018-04-07 15:09:30
【问题描述】：

我需要创建一个包含来自 Json 对象数组的信息的表。假设数据以下列格式到达。

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”，因此数据应显示在其对应的字段中...

【问题讨论】：

标头和数据之间的关联是什么？我没有看到任何匹配。是id吗？
您只有 3 个标题，但您正在渲染 6 列。如果您不处理，还应该如何显示信息？
@ZivWeissman with 'fieldId'...
@Jota.Toledo 这就是我的问题的重点，如何根据字段的数量来处理信息......
尝试一下？...

标签： html json angular ngfor

【解决方案1】：

只需操作组件类中的数据。

试试这个

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>

【讨论】：

data.splice(0, x.fields.length) 将始终返回相同的 [0..x.fields.length]，与迭代无关。所以你最终会得到显示相同信息的 N 行。如果 OP 不想改变原始对象怎么办？
我的错，忘了 splice 会改变原始数组
@AmayaSan 是啊，行得通！一百万谢谢！！！哇，我花了三天时间试图找到解决方案。
很高兴听到，没问题 :)

【解决方案2】：

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

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

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

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

【讨论】：

感谢您的回复，但仍然与我提出的问题相同...
那么你没有正确设置它，用你如何尝试这样做更新你的问题，我可以告诉你哪里出错了。或者只是添加更多关于如何/何时在控制器中设置配置文件的代码。