时间戳

首页 > 解决方案 > 如何使用 Angular 中的单选按钮更改数组值

angular - 如何使用 Angular 中的单选按钮更改数组值

问题描述

我正在设置一个对象电话数组，其中每个电话都有一个角色，这个角色是主要的还是次要的，我想用一个单选按钮更新主要的，这更新我的对象列表这是我的代码

HTML

<section *ngFor="let phone of phoneList; let index = index">
    <!-- test 1 -->
    <input [checked]="phone.phoneRole==='main'" type="radio" id="phoneTest{{index}}" name="phoneRoleTest">
    <!-- test 2 -->
    <input [(ngModel)]="phone.phoneRole" type="radio" id="phone{{index}}" name="phoneRole">
    <form >
        <input id="phoneNumber{{index}}" [disabled]="true" value="{{phone.phoneNumber}}">
        <button [disabled]="phone.phoneRole==='main'" (click)="editPhone(phone)">edit</button>
        <button type="button" [disabled]="phone.phoneRole==='main'" (click)="deletePhone(phone)">x</button>
    </form>
</section>

<form (ngSubmit)="f.form.valid && onAddPhone()" #f="ngForm">
    <!-- N phones input -->
    <label for="phoneNumberInput">Phone Number:</label>
    <input required class="m-1 col-md-2" type="tel" name="tel" id="phoneNumber" placeholder="Phone number" [(ngModel)]="phoneNumberInput">
    <button>+</button>
</form>

组件 TS

export class CreateCustomerComponent implements OnInit {
  phoneNumberInput: string = '';
  phoneList: PhoneNumber[] = [];
  phoneIndex: number = 0;

  phoneRole: string = 'main';

  constructor(private phoneService: PhoneService) {}

  ngOnInit(): void {
    // set the phoneList from the service to the local phoneList
    this.phoneList = this.phoneService.phoneList;
  }

  create(){

  }
  onAddPhone() {
    // create first obj
    if (this.phoneList.length < 1) {
      var newPhone = new PhoneNumber(this.phoneNumberInput, this.phoneRole);
    } else {
      // create new obj phoneNumber
      this.phoneRole = 'secundary';
      var newPhone = new PhoneNumber(this.phoneNumberInput, this.phoneRole);
    }
    // add phoneNumber to phoneList
    this.phoneService.addPhone(newPhone);
  }

  editPhone(phone: PhoneNumber) {
    if (phone.phoneRole === 'main') {
      alert('No editable');
    } else {
    }
  }

  deletePhone(phoneNumber: PhoneNumber) {
    this.phoneService.delete(phoneNumber);
  }
}

服务TS

import { PhoneNumber } from "./phoneNumber.component";

export class PhoneService{

    phoneList: PhoneNumber[]=[];

    addPhone(newPhone:PhoneNumber){
        // add phoneNumber to phoneList
        this.phoneList.push(newPhone);
    };

    delete(phoneNumber: PhoneNumber){
        // delete phoneNumber of the phoneList
        const index: number = this.phoneList.indexOf(phoneNumber);
        this.phoneList.splice(index,1);
    };

}

我只想知道如何使用单选按钮（如果可能的话）设置我的对象数组中的主电话，感谢您的时间 c：

标签： angulartypescript

解决方案

我找到了一种用下一个结构更新phones对象数组的方法

单选按钮的 html

<input
        [checked]="phone.mainPhone && !phone.editPhone"
        [disabled]="phone.editPhone"
        (change)="radioChangeHandler(index)"
        type="radio"
        id="phoneTest{{ index }}"
      />

该按钮的 TS

// set the main phone
  radioChangeHandler(index: number) {
    if (!this.phoneList[index].editPhone) {
      for (let index = 0; index < this.phoneList.length; index++) {
        this.phoneList[index].mainPhone = false;
      }
      this.phoneList[index].mainPhone = true;
    } else {
      alert('You must save the change in the phone before select this as main');
    }
  }

推荐阅读