Question

我有这个数据结构：

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

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

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

  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)

我需要在我的 ngFor 中进行以下操作吗？如果没有，请帮帮我

{{1}}

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

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

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

2 个答案: