javascript - 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，然后填充数组中的相应元素。文件

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 中，以准确知道您想要选择哪个联系人。

let contacts --> let contact(是一个contact)

<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

希望能帮到你