Angular 2: по умолчанию установлен флажок в ngFor

Я пытаюсь установить значение по умолчанию, отмеченное флажком внутри моего ngFor. Это мой набор флажков:

tags = [{
  name: 'Empathetic',
  checked: false
}, {
  name: 'Smart money',
  checked: true
}, {
  name: 'Minimal help after writing check',
  checked: false
}, {
  name: 'Easy term sheet',
  checked: true
}];

Это мой html

<div class="form-group">
  <div class="form-check" *ngFor="let tag of tags;">
    <label class="form-check-label" for="tag{{tag.value}}">
      <input
        class="form-check-input"
        type="checkbox"
        id="tag{{tag.value}}"
        name="tagOptions"
        [(ngModel)]="tag.checked">
      {{tag.name}}
    </label>
  </div>
</div>

Желаемый результат - получить 2 отмеченных и 2 снятых флажка, но все они не отмечены. Я также пробовал разные варианты с [checked] = "tag.checked", но, похоже, это не помогло.


typescript angular checkbox ngfor angular2-ngmodel
person Martin Brandhaug    schedule 13.07.2017    source источник
comment
Я скопировал Ваш код в сгенерированный проект ng, и он работает, я не вижу проблем с Вашим кодом ..   -  person Kasper Ziemianek    schedule 13.07.2017

Ответы (5)


arrow_upward
22
arrow_downward

Это решило мою проблему с отмеченными / снятыми флажками, в то время как я все еще мог контролировать изменения в моих переменных.

HTML

<div class="form-group">
  <div class="form-check" *ngFor="let tag of tags; let i = index;">
    <label class="form-check-label" for="tag{{tag.value}}">
      <input
        class="form-check-input"
        type="checkbox"
        id="tag{{tag.value}}"
        name="tagOptions"
        (change)="changeCheckbox(i)"
        [checked]="tag.checked">
      {{tag.name}}
    </label>
  </div>

.ts

  changeCheckbox(tags, i) {
    if (tags) {
      this.tags[i].checked = !this.tags[i].checked;
    }
  }
person Martin Brandhaug    schedule 13.07.2017
comment
это ответ, который я публиковал раньше, почему вы снова отправляете в качестве ответа? - person Sajeetharan; 20.08.2017
comment
У вас не было (change) = changeCheckbox (i) - person Martin Brandhaug; 21.08.2017
comment
не следует ли передавать аргументы тегов в (change) = changeCheckbox (i)? - person codemonkeybr; 23.02.2018

arrow_upward
6
arrow_downward

Используйте свойство checked вместо ngModel,

 <div class="form-group">
      <div class="form-check" *ngFor="let tag of tags">
        <label class="form-check-label" for="tag{{tag.value}}">
          <input
            class="form-check-input"
            type="checkbox"
            id="tag{{tag.value}}"
            name="tagOptions"
            [checked]="tag.checked">
          {{tag.name}}
        </label>
      </div>
   </div>

ДЕМО

person Sajeetharan    schedule 13.07.2017
comment
Правильно, это ответ на мой вопрос. Однако это приводит к другой проблеме: если я сниму или поставлю любой из флажков, изменения не будут зарегистрированы. - person Martin Brandhaug; 13.07.2017

arrow_upward
3
arrow_downward

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

<div class="form-group">
  <div class="form-check" *ngFor="let tag of tags;">
    <label class="form-check-label" for="tag{{tag.value}}">
      <input
        class="form-check-input"
        type="checkbox"
        id="tag{{tag.value}}"
        [name]="tag.name"
        [(ngModel)]="tag.checked">
      {{tag.name}}
    </label>
  </div>
</div>
person Danny22    schedule 10.12.2018

arrow_upward
1
arrow_downward

Этот вопрос спасет мой мозг, ха-ха. Однако я сделал «апгрейд» в правильном ответе:

HTML:

<div class="form-group">
      <div class="form-check" *ngFor="let tag of tags; let i = index;">
        <label class="form-check-label" for="tag{{tag.value}}">
          <input
            class="form-check-input"
            type="checkbox"
            id="tag{{tag.value}}"
            name="tagOptions"
            (change)="changeCheckbox($event, i)"
            [checked]="tag.checked">
          {{tag.name}}
        </label>
      </div>

TS:

changeCheckbox(event, index){
      this.tags[index] = event.target.checked;
    }
person nardocesar    schedule 15.08.2018

arrow_upward
1
arrow_downward

Вместо этого используйте тег имени в качестве идентификатора:

   <label class="form-check-label" for="tag{{tag.value}}">
      <input
        class="form-check-input"
        type="checkbox"
        id="tag{{tag.value}}"
        name="tag{{tag.value}}"
        [(ngModel)]="tag.checked">
      {{tag.name}}
    </label>
person J. Jerez    schedule 04.03.2019