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

  {

    name: '',

    number: '',

  },

  ...

];

您需要将您的 pickContact 函数放入带有联系人对象的 ion-card 中，以准确了解您想要选择的联系人。

让联系人 --> 让联系人（这是一个联系人）

<ion-item-group *ngFor="let contact of mContacts">

   <ion-card (click)="pickContact(contact)">

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

</ion-item-group>

然后在你的组件中

...

pickContact(contact) {

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

     contacts.forEach(c => {

        if (c.name === contact.name ) {

           // Do the matching

           const contactToUpdate = mContacts.find(c => c.name === contact.name)

           contactToUpdate.name = c.name;

           contactToUpdate.number = c.number;

        }

     })

});

}

我在这里没有看到确切的用例，但这是您可以做的事情.. 当然有更好的方法来做到这一点，但我更喜欢保持简单。

关于这一点的一件事

name: [''] --> 这是一个字符串数组，所以要得到值，你需要做mContacts[0].name[0] --> 你会得到数组的第一项并记录他的名字，但我不明白为什么你在这里有一个数组......

你可以使用 lodash 来做一些事情Lodash

希望我能帮上忙