Проверить переключатель по умолчанию в списке групп переключателей в Angular? - PullRequest
Новая
       15

Проверить переключатель по умолчанию в списке групп переключателей в Angular?

0 голосов
/ 04 февраля 2019

Я использую Angular 7 и HTML.При загрузке страницы я столкнулся с проблемой с установленным по умолчанию переключателем.Я могу получить значение, но не могу установить переключатель при загрузке страницы.Пожалуйста, кто-нибудь, подскажите мне, как решить эту проблему.

Ссылка StackBlitz

// мой файл ts 

paymentModeStatus: string;
selectedValueForPaymentModeChange = 'cash';
paymentModeList: any = [];

public constructor() {}

ngOnInit() {
  this.getPaymentModeList();
}
getPaymentModeList() {
  this.paymentModeList = [{
      'checked': true,
      'name': 'Cash',
      'value': 'cash',
    },
    {
      'checked': false,
      'name': 'Pay to Accounts',
      'value': 'accounts',
    }
  ];
}

// мой HTML-файл 

<code><div style="font-weight: bold">Payment Mode:</div>

<label 
  style="padding: 0 5px 0 20px" 
  *ngFor="let paymentMode of paymentModeList">
  <input 
    type="radio" 
    name="paymentMode" 
    required="false"
    [(ngModel)]="paymentModeStatus" 
    [value]="paymentMode.name"
    (click)="paymentModeStatusAction(paymentMode.value)"             
    [checked]='paymentMode.checked'>
    {{paymentMode.name}}
</label>
<pre>{{ paymentModeStatus }}

Ответы [ 2 ]

0 голосов
/ 04 февраля 2019

Это связано с тем, что атрибут Проверено не требует значения

https://www.w3schools.com/tags/att_input_checked.asp

Пока атрибут проверки существует, элемент будет проверяться.

Сверху ссылка 

<form action="/action_page.php">
  <input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle" value="Car" checked> I have a car<br>
  <input type="submit" value="Submit">
</form>

РЕДАКТИРОВАТЬ Я изменил ваш html [buttons-checkbox.html] на отображаемый по умолчанию, проверенный с помощью коданиже 

<code><style>
  label {
    padding: 0 5px 0 20px
  }
</style>

<div><b>Payment Mode:</b></div>

  <label *ngFor="let paymentMode of paymentModeList">

    <input 
      type="radio" 
      name="paymentMode" 
      required="false" 
      [(ngModel)]="paymentModeStatus" 
      [checked]="paymentMode.checked == 'true'"
    />

    {{paymentMode.name}} {{paymentMode.checked}}

  </label>

<pre>{{ paymentModeStatus }}
0 голосов
/ 04 февраля 2019

Поскольку вы указали [(ngModel)]="paymentModeStatus" и [value]="paymentMode.name", вам нужно будет установить paymentModeStatus в качестве name любого способа оплаты, который вы хотите установить по умолчанию.

Просто добавьтеэто к вашему ngOnInit

this.paymentModeStatus = this.paymentModeList[0].name;

Вот вам Рабочий образец StackBlitz для вашей ссылки.

...