Невозможно установить значение переключателя динамически после второго щелчка - PullRequest
Новая
       19

Невозможно установить значение переключателя динамически после второго щелчка

0 голосов
/ 05 ноября 2018

У меня есть кнопка, которая используется для динамической проверки или снятия переключателей. Проблема в том, что он работает один раз, а затем, если я решу вручную нажать кнопку с зависимой фиксацией той же группы (другой, конечно), она обновится, как и ожидалось. Однако, когда я пытаюсь динамически настроить его на предыдущее значение (с помощью нажатия кнопки), оно больше не применяет это значение.

Вот код

HTML: 

<input type="radio" id="one" class="" formControlName="group" value="one" [checked] = "radioGroup.first" >
<input type="radio" id="two" class="" formControlName="group" value="two" [checked] = "radioGroup.second" >
<input type="radio" id="three" class="" formControlName="group" value="three" [checked] = "radioGroup.third" >

.ts 

onRadioDynamicChange() {
this.radioGroup = { first: true, second: null, third: null };
}

Итак, он меняется при первом нажатии на onRadioDynamicChange, он проверяет первую радиокнопку. Затем я нажимаю на его родного брата, а затем снова на onRadioDynamicChange, и он больше не проверяет первый radioButton, никаких действий не происходит.

РЕДАКТИРОВАТЬ

Вот поведение: Пример Stackblitz

Ответы [ 2 ]

0 голосов
/ 05 ноября 2018

Я также попробовал то, что вы сделали, Акиб Скорее, это было мое первое решение проблемы, но оно все еще не работает отлично, это происходит так же, как опера. Первый раз работает, в следующий раз не обновится.

Я нашел обходной путь, попробуйте это: 

  <div class="container">
        <input type="radio" name="radio" (click)="radio = 'one'" id="one" class="" value="one" [checked]="radio == 'one'">
        <input type="radio" name="radio" id="two" (click)="radio ='two'" value="two" [checked]="radio == 'two'">
        <input type="radio" name="radio" id="three" (click)="radio ='three'" class="" value="three" [checked]="radio == 'three'">
        <button (click)=' onRadioDynamicChange()'>Click Me</button>
    </div>

тс: 

  onRadioDynamicChange() {
        this.radio = "one";
  }

Но я не знал, почему первый подход не работает, как ожидалось. Если кто-то знает причину, я буду рад узнать об этом.

0 голосов
/ 05 ноября 2018

, если вы хотите использовать объект любого типа, который вы использовали в [https://stackblitz.com/edit/angular-srfwdq?file=src%2Fapp%2Fapp.component.html] вы должны использовать пример объекта 'radioGroup' в качестве radioGroup: any = {} так что вы можете добавить свойство к нему и в html использовать опционально, если вы не уверены в погоде свойства объекта или нет, оно присутствует как 'radioGroup? .first', 'radioGroup? .second' и 'radioGroup? .third'

вы должны использовать это так и убедиться, что только один из объекта 'radioGroup' является истинным за один раз в тс. 

  export class AppComponent {
    name = 'Angular';
    radioGroup:any={first:false,second:false,third:false};


    onRadioDynamicChange() {
      this.radioGroup.second =false;
      this.radioGroup.third=false;
      this.radioGroup.first =true;
    }

  }

в HTML 

<form >

<input type="radio" id="one" name="a"  value="one" 
[checked] = "radioGroup.first" >First
<input type="radio" id="two" name="a"  value="two" 
[checked] = "radioGroup.second" >Second
<input type="radio" id="three" name="a"  value="three" 
[checked] = "radioGroup.third" >Third


<button type="button" 
(click)="onRadioDynamicChange()">first</button>

  </form>

определенно будет работать

...