Невозможно назначить только для чтения свойство '0' строки ''

Question

У меня в телефоне есть аутентификация телефона. Мы пытаемся автоматически заполнить otp, и пользователь также может заполнить его вручную.

Чтобы позволить пользователю вводить otp вручную, я разработал функцию keyup, как показано ниже. И для автоматического заполнения otp используется [(ngModel)] для каждого поля ввода, чтобы отразить otp на html

Но каждый раз, когда пользователь пытается что-то напечатать, следующая ошибка показывает

TypeError: Cannot assign to read-only property '0' of string ''

Как решить ошибка?

Заранее спасибо

. html

<ion-row >
    <ion-col>
     <ion-input class="x" #otp1 required="true" maxLength="1" [(ngModel)] ="OTP[0]" (keyup)="otpController($event,otp2,'')">
     </ion-input>
     <ion-input class="x" #otp2 required="true" maxLength="1" [(ngModel)]="OTP[1]" (keyup)="otpController($event,otp3,otp1)">
     </ion-input>
     <ion-input class="x" #otp3 required="true" maxLength="1" [(ngModel)]="OTP[2]"  (keyup)="otpController($event,otp4,otp2)">
     </ion-input>

     <ion-input class="x" #otp4 required="true" maxLength="1" [(ngModel)]="OTP[3]"  (keyup)="otpController($event,otp5,otp3)">
    </ion-input>

    <ion-input class="x" #otp5  required="true" maxLength="1" [(ngModel)]="OTP[4]" (keyup)="otpController($event,otp6,otp4)">
    </ion-input>

    <ion-input class="x" #otp6  required="true" maxLength="1" [(ngModel)]="OTP[5]" (keyup)="otpController($event,'',otp5)">
    </ion-input>

    </ion-col>
  </ion-row>

.ts

OTP: string = '';

otpController(event,next,prev, index){


    if(index == 6) {
      console.log("submit")
    }
    if(event.target.value.length < 1 && prev){
      prev.setFocus()
    }
    else if(next && event.target.value.length>0){
      next.setFocus();
    }
    else {
     return 0;
    } 
 }

. css

.x{
  display:inline-block;
  width:50px;
  height:50px;
  margin:10px;
  border-radius: 50%;
  --background:#e1e1e1;
  --padding-start:7px;
  }

Answer 1

Ну, OTP это строка. Но вы привязываете его индексы (OTP[0], OTP[1] и т. Д. c.) К полю, поэтому, когда пользователь вводит данные, Angular попытается присвоить новое значение OTP[0], и др c. Но: Вы не можете назначать строковые индексы. Попробуйте OTP = ''; OTP[0] = 'a' в консоли, и вы получите ту же ошибку, потому что строки являются примитивными значениями и не могут изменяться.

Это будет работать, если вы будете использовать массив в качестве OTP. Мол, OTP = otpString.split(''). Тогда это будет работать. Позже вы можете использовать otpString = OTP.join(''), чтобы получить обратно строку.

Если предположить, что в переменной otpString будет "123456", то выполнение OTP = otpString.split('') даст массив ["1", "2", "3", "4", "5", "6"]. Таким образом, назначение работает (вы можете написать OTP[0] = 'a' с массивом просто отлично).