Ionic/Angular 如何将数据添加到列表答案

【问题标题】：Ionic/Angular How to add data to listIonic/Angular 如何将数据添加到列表
【发布时间】：2019-10-07 10:56:32
【问题描述】：

我有一个正在开发的应用程序，目前我正在开发一个用户点击标记为“紧急联系人”的项目的部分。然后向用户展示一个包含 5 个空块的列表，每个块都有一个标签姓名：号码：

用户点击一个块，然后选择一个联系人。

目前我可以使用用户从联系人列表中选择的名称和号码填充其中一个块。

这里是相关代码

import { Component, OnInit } from '@angular/core';
import { Contacts, Contact, ContactField, ContactName } from '@ionic-native/contacts/ngx';
@Component({
  selector: 'app-contact-component',
  templateUrl: './contact-component.component.html',
  styleUrls: ['./contact-component.component.scss'],
})
export class ContactComponentComponent implements OnInit {

  constructor(private contacts: Contacts) { }
  
  ngOnInit() {}
  cName:any;
  cNumber:any;
  pickContact() {
    this.contacts.pickContact().then((contact) => {
    this.cName = contact.name.givenName;
    this.cNumber = contact.phoneNumbers[0].value;
      // console.log(cNumber);
    });
  }
}

这里是hmtl 重复 5 次，形成 5 个区块

  <ion-grid>
    <ion-row>
      <ion-col>
        <ion-item-group (click) = "pickContact()">
          <ion-card>
              <ion-item lines = "none">             
                  <ion-label class="ion-text-wrap">Name: {{cName}}</ion-label>        
                </ion-item>
                <ion-item lines = "none" >
                  <ion-label class="ion-text-wrap">Number: {{cNumber}}</ion-label>
                </ion-item>       
          </ion-card>            
        </ion-item-group>

我的问题是我不知道如何重复这个，没有成堆的代码。

我正在考虑使用嵌套数组，但我不完全确定如何去做我希望用户点击一个块 -> 选择一个联系人 -> 功能填充相应的块。

有什么建议吗？

【问题讨论】：

标签： javascript angular typescript multidimensional-array ionic4

【解决方案1】：

Angular 在处理列表方面表现出色。实际上，您不必对整个列表进行硬编码。

您需要的是 *ngFor 指令。

.html 文件

<ion-card *ngFor="let contact of emergencyContacts; let i=index">
    <ion-item-group (click)="pickContact(i)">
        <ion-item lines = "none">             
            <ion-label class="ion-text-wrap">Name: {{contact.name}}</ion-label>        
        </ion-item>
        <ion-item lines = "none" >
          <ion-label class="ion-text-wrap">Number: {{contact.number}}</ion-label>
        </ion-item>  
    </ion-item-group>     
</ion-card>

.ts 文件

export class ContactComponentComponent implements OnInit {

/*
of course, the following array would be better to be created by a loop
I leave it this way to be easier to understand
*/
      emergencyContacts = [
        {name: '', number: ''},
        {name: '', number: ''},
        {name: '', number: ''},
        {name: '', number: ''},
        {name: '', number: ''}
      ]

      constructor(private contacts: Contacts) { }

      ngOnInit() {}

      pickContact(i) {
          this.contacts.pickContact().then((contact) => {
              this.emergencyContacts[i].name = contact.name.givenName;
              this.emergencyContacts[i].number = contact.phoneNumbers[0].value;
          });
      }
}

【讨论】：