Отключение использования флажка вне того, что находится в (изменить) свойство в Angular - PullRequest
Новая
       23

Отключение использования флажка вне того, что находится в (изменить) свойство в Angular

0 голосов
/ 13 июня 2019

Я создаю веб-приложение с угловым;и я сталкиваюсь с проблемой при работе с флажками и угловыми.Флажки кажутся «наполовину небезразличными» к тому факту, что они связаны с переменной.В качестве примера у меня есть два флажка.Один из боксов при смене отключил первый флажок.Первый флажок при нажатии ничего не должен делать и оставаться отмеченным.Однако, хотя функция, вызываемая первым флажком, сохраняет связанную переменную как true;флажок становится не отмеченным.Это приводит к различному количеству других проблем в моей программе, поскольку это не то поведение, которого я ожидал

Вот HTML: 

<label><input type="checkbox" [checked]="xChecked" (change)="xChanged()">I'm X</label>

<label><input type"checkbox" [checked]="yChecked" (change)="yChanged()">I'm Y></label>

Вот Javascript: 

xChanged(){
  this.xChecked = true;
}
yChanged(){
  this.xChecked = false;
}

С этим кодом я ожидал, что невозможно изменить ввод «x» без нажатия на ввод y.Фактический результат заключается в том, что хотя вход y изменяет вход x, простое нажатие на вход x изменит его самостоятельно.Это то, что я имею в виду, когда говорю, что angular кажется только «наполовину небезразличным», когда флажок привязан к переменной.

EDIT: я подумал, что использование (click) вместо (change) может быть потенциальным решением, но изменение, которое, казалось, не имело никакого значения.

Ответы [ 2 ]

0 голосов
/ 14 июня 2019

Лучше всего, если xChecked имеет значение true, отключить первый флажок.Ваш javascript будет таким же. 

<mat-checkbox [(ngModel)]="xChecked" [disabled]="xChecked">X me!</mat-checkbox>

<mat-checkbox [(ngModel)]="yChecked" (click)="yChanged()">I'm Y!</mat-checkbox>
0 голосов
/ 14 июня 2019

Вы можете сделать обходной путь, например: 

  xChecked: boolean;
  yChecked: boolean;
  timer: any;

  xChanged(event){
    this.timer = window.setTimeout(() => {
      this.xChecked = true;
    },0)
  }

  yChanged(){
    this.xChecked = false;
  }

  ngOnDestroy() {
    window.clearTimeout(this.timer);
  }

Это гарантирует, что значение будет установлено в конце очереди выполнения (проверьте это сообщение ссылка ).

...