Angular 如何动态更改数组中的值

Question

我有一些代码正在处理，允许用户选择联系人，我希望代码能够填充数组，

因为然后用 NgFor 填充 Html 模板

但是，我正在努力使函数动态更改数组中的数据，任何人都可以帮助我或至少为我指明一个方向。

这是相关的代码html文件

<ion-list>

  <ion-grid>

    <ion-row>

      <ion-col>

        <ion-item-group (click) = "pickContact()"  *ngFor="let contacts of mContacts">

          <ion-card>

              <ion-item lines = "none">             

                  <ion-label class="ion-text-wrap">Name: {{contacts.name}}</ion-label>        

                </ion-item>

                <ion-item lines = "none" >

                  <ion-label class="ion-text-wrap">Number: {{contacts.number}}</ion-label>

                </ion-item>       

          </ion-card>            

        </ion-item-group>    

      </ion-col>

    </ion-row>

  </ion-grid>

</ion-list>

我希望在选择卡时调用函数 pickContact，然后填充数组中的对应元素。.ts 文件

export class ContactComponentComponent implements OnInit {

  constructor(private contacts: Contacts) { }

  mContacts = [

   {

    name: [''],

    number: ['']

   },

   {

    name : ['Carl'],

    number: ['065 623 4567']

   }

  ];

  ngOnInit() {}

//currently thows an error:  

//Property 'name' does not exist on type '{ name: string[]; number: string[]; }[]'.

//Property 'number' does not exist on type '{ name: string[]; number: string[]; }[]'

  pickContact() {

    this.contacts.pickContact().then((contact) => {

    this.mContacts.name = contact.name.givenName;

    this.mContacts.number = contact.phoneNumbers[0].value;

    });

  }

}

Answer 1

你应该像这样更新你的数据，它更容易..mContacts = [&nbsp; {&nbsp; &nbsp; name: '',&nbsp; &nbsp; number: '',&nbsp; },&nbsp; ...];您需要将您的 pickContact 函数放入带有联系人对象的 ion-card 中，以准确了解您想要选择的联系人。让联系人 --> 让联系人（这是一个联系人）<ion-item-group *ngFor="let contact of mContacts">&nbsp; &nbsp;<ion-card (click)="pickContact(contact)">&nbsp; &nbsp; &nbsp; <ion-item lines = "none">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<ion-label class="ion-text-wrap">Name: {{contact.name}}</ion-label>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</ion-item>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<ion-item lines = "none" >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ion-label class="ion-text-wrap">Number: {{contact.number}}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</ion-label>&nbsp; &nbsp; &nbsp; </ion-item>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp;</ion-card>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</ion-item-group>然后在你的组件中...pickContact(contact) {&nbsp; &nbsp;this.contacts.pickContact().then((contacts) => {&nbsp; &nbsp; &nbsp;contacts.forEach(c => {&nbsp; &nbsp; &nbsp; &nbsp; if (c.name === contact.name ) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// Do the matching&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;const contactToUpdate = mContacts.find(c => c.name === contact.name)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;contactToUpdate.name = c.name;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;contactToUpdate.number = c.number;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp;})});}我在这里没有看到确切的用例，但这是您可以做的事情.. 当然有更好的方法来做到这一点，但我更喜欢保持简单。关于这一点的一件事name: [''] --> 这是一个字符串数组，所以要得到值，你需要做mContacts[0].name[0] --> 你会得到数组的第一项并记录他的名字，但我不明白为什么你在这里有一个数组......你可以使用 lodash 来做一些事情Lodash希望我能帮上忙