Angular中如何通过单选按钮修改对象数组的主号码属性

可以实现，以下是具体修改方案：

一、核心逻辑说明 #

因为主号码全局只能有一个，所以切换单选按钮时需要做两个操作：

• 将当前选中的手机号的phoneRole设为main
• 把数组里其他所有手机号的phoneRole统一改为secundary

二、HTML代码修改 #

把原来的两个测试单选按钮替换成如下代码，用checked绑定选中状态，加change事件触发主号码更新即可：

<section *ngFor="let phone of phoneList; let index = index">
    <!-- 主号码单选按钮 -->
    <input 
        [checked]="phone.phoneRole === 'main'" 
        type="radio" 
        id="phone{{index}}" 
        name="phoneRole"
        (change)="setMainPhone(phone)"
    >
    <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">
    <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代码修改 #

新增setMainPhone方法处理主号码切换逻辑，同时补充删除主号码时的兜底逻辑，避免出现无主号码的异常情况：

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

  // 原有全局phoneRole变量可删除，不再使用
  constructor(private phoneService: PhoneService) {}

  ngOnInit(): void {
    this.phoneList = this.phoneService.phoneList;
  }

  create(){

  }
  
  onAddPhone() {
    // 优化新增号码的角色判断逻辑
    const role = this.phoneList.length < 1 ? 'main' : 'secundary';
    const newPhone = new PhoneNumber(this.phoneNumberInput, role);
    this.phoneService.addPhone(newPhone);
    // 新增后清空输入框
    this.phoneNumberInput = '';
  }

  // 新增：切换主号码逻辑
  setMainPhone(targetPhone: PhoneNumber) {
    this.phoneList.forEach(phone => {
      phone.phoneRole = phone === targetPhone ? 'main' : 'secundary';
    });
  }

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

  deletePhone(phoneNumber: PhoneNumber) {
    this.phoneService.delete(phoneNumber);
    // 兜底逻辑：如果删除的是主号码且还有剩余手机号，自动把第一个设为主号码
    if(phoneNumber.phoneRole === 'main' && this.phoneList.length > 0) {
      this.phoneList[0].phoneRole = 'main';
    }
  }
}

四、服务TS代码无需修改 #

原有增删逻辑可以正常运行，不需要调整。

注：你之前写的test2方案的问题在于，同name的单选按钮属于同一组，ngModel需要绑定同一个全局变量标识选中项，不能直接绑定每个元素自己的属性，因此用checked+change事件的方案更适配当前需求。

内容的提问来源于stack exchange，提问作者WhiteAB