Блог

Я устанавливаю массив телефонов объектов, где у каждого телефона есть роль, эта роль является основной или второстепенной, я хочу обновить основную с помощью переключателя, и это обновление моего списка объектов, это мой код

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 amp;amp; 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:

Я нашел способ обновить массив объектов телефонов следующей структурой

html-код переключателя

 <input
        [checked]="phone.mainPhone amp;amp; !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');
    }
  }