需要在 NgFor 上解析一个复杂的数组答案

【问题标题】：Need parse a complex array on NgFor需要在 NgFor 上解析一个复杂的数组
【发布时间】：2017-09-16 02:32:01
【问题描述】：

我有这个数据结构：

我需要访问数组内部每个对象的拼写错误，实际上我在 Ionic 2 上有这个结构：

  <ion-item-group *ngFor="let data of contraCheque">
      <ion-item-divider color="light">{{ data[0].competencia }}</ion-item-divider> <!-- imprime o dado correto -->
      <ion-item (click)="consultarCheque(data)">{{ data }}</ion-item> <!-- imprime todos os objetos de cada array -->
      <ion-item (click)="consultarCheque(data)">{{ data[0].tipo }}</ion-item> <!-- imprime apenas a primeira prop de cada array -->
  </ion-item-group>

如果我使用索引尝试打印每种类型的每个道具，则它什么也不打印（见下图）我认为逻辑是错误的：

 <ion-item-group *ngFor="let data of contraCheque; index as i">
      <ion-item-divider color="light">{{ data[0].competencia }}</ion-item-divider>
      <ion-item (click)="consultarCheque(data)">{{ data[i].tipo }}</ion-item> 
  </ion-item-group>

我需要在我的*ngFor 中执行以下过程，这可能吗？如果没有，请帮助我。

  const dadosContraCheque = [[{"tipo":"Complementar","id_folha":"24015","competencia":"03\/2017"}],[{"tipo":"Mensal","id_folha":"23855","competencia":"02\/2017"},{"tipo":"Sodexo","id_folha":"24075","competencia":"02\/2017"}],[{"tipo":"Mensal","id_folha":"23376","competencia":"01\/2017"},{"tipo":"Sodexo","id_folha":"23755","competencia":"01\/2017"}],[{"tipo":"13\u00ba Salari","id_folha":"22415","competencia":"12\/2016"},{"tipo":"Complementar","id_folha":"22535","competencia":"12\/2016"},{"tipo":"Mensal","id_folha":"22655","competencia":"12\/2016"},{"tipo":"Complemento","id_folha":"22675","competencia":"12\/2016"},{"tipo":"Sodexo","id_folha":"23015","competencia":"12\/2016"}],[{"tipo":"1\u00aa Parcela do 13\u00ba Salar","id_folha":"21798","competencia":"11\/2016"},{"tipo":"Mensal","id_folha":"21975","competencia":"11\/2016"},{"tipo":"Sodexo","id_folha":"22555","competencia":"11\/2016"}],[{"tipo":"Mensal","id_folha":"21295","competencia":"10\/2016"},{"tipo":"Sodexo","id_folha":"21755","competencia":"10\/2016"}],[{"tipo":"Mensal","id_folha":"21054","competencia":"09\/2016"},{"tipo":"Sodexo","id_folha":"21375","competencia":"09\/2016"}]]
  const tipo = dadosContraCheque.map(array => array.map(objeto => objeto.tipo) )
  console.log(tipo)

【问题讨论】：

请勿粘贴代码图片或代码图片链接。将代码放入问题中。

标签： javascript angular ionic-framework ionic2 ionic3

【解决方案1】：

你在数组中有数组，所以你应该如下使用

  <ion-item-group *ngFor="let data of contraCheque[0]">
      <ion-item-divider color="light">{{ data[0].competencia }}</ion-item-divider> <!-- imprime o dado correto -->
      <ion-item (click)="consultarCheque(data)">{{ data |json }}</ion-item> <!-- will print array as json--> 
      <ion-item (click)="consultarCheque(data)">{{ data.tipo }}</ion-item> <!-- imprime apenas a primeira prop de cada array -->
  </ion-item-group>

【讨论】：

这种方式行不通。这是打印this

【解决方案2】：

这行得通：

  <ion-item-group *ngFor="let data of contraCheque">
      <ion-item-divider color="light">{{ data[0].competencia }}</ion-item-divider>
      <span *ngFor="let d of data" >
        <ion-item (click)="consultarCheque(data)">{{ d.tipo }}</ion-item>
      </span>
  </ion-item-group>

【讨论】：