Angular Флажок в * ngFor - PullRequest
Новая
       5

Angular Флажок в * ngFor

1 голос
/ 03 апреля 2020

Я использую KendoUI с Angular7 и пытаюсь получить динамический список c флажков со связанным состоянием проверки. Вот основные c html для этого списка: 

  <div *ngFor="let option of RoleOptions">
    <input type="checkbox" class="k-checkbox" [(ngModel)]="option.Selected" style="width: auto">
    <label class="dialogLabels k-checkbox-label">{{option.Role.Name}}</label>
  </div>

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

У меня также есть эта строка над ней: 

<input type="checkbox" class="k-checkbox" [(ngModel)]="NewUserSendEmail" id="cbEmail" style="width: auto">
<label class="dialogLabels k-checkbox-label" for="cbEmail"> Email login data to the user</label>

Это прекрасно работает, позволяет мне связывать, и позволяет мне проверять, и т. Д. c. Я вижу только 2 различия.

Во-первых, те, что в ngfor, не имеют идентификатора для метки, с которой нужно связываться, или чего-либо еще, что можно найти. Тем не менее, я не нашел ничего, что требуется для идентификатора, и на странице Kendo есть много примеров, которые показывают примеры флажков без идентификаторов, поэтому я не думаю, что это проблема (но, безусловно, может быть ошибочной).

Во-вторых, они в nGFor l oop. Я не знаю, почему это все испортит, но это все, о чем я могу думать. Я погуглил вокруг, но не смог найти здесь ничего о проблеме или о том, как ее исправить.

Есть идеи, где я ошибаюсь или чего я не вижу? Я регистрировал объекты, к которым он привязан, и значение true / false (не null или undefined), поэтому это не должно быть проблемой. Не уверен, где еще искать ...

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

После небольшого количества исследований, это определенно связано со стилем кендо. Если я сделаю это так: 

    <div *ngFor="let option of RoleOptions">
      <label class="dialogLabels">
        <input type="checkbox" [(ngModel)]="option.Selected" style="width: auto">
        {{option.Role.Name}}</label>
    </div>

Это работает, но, очевидно, не имеет кендо. Как я могу получить динамический список c флажков с таким же внешним видом, как и у остальных приложений?

Ответы [ 2 ]

1 голос
/ 03 апреля 2020

NgModel по умолчанию не работает с флажками.

Обратите внимание на: Angular 2 флажок Двухстороннее связывание данных

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

<input
  type="checkbox"
  [checked]="option.Selected"
  (change)="option.Selected = !option.Selected"/>

Или используйте ngModel с ngmodeloptions, например, так: 

<input
  type="checkbox"
  [(ngModel)]="option.Selected"
  [ngModelOptions]="{standalone: true}"/>
0 голосов
/ 08 апреля 2020

Хорошо, так что я все еще не уверен, почему это не сработало так, как у меня; независимо от того, что я делал (даже копируя стили), он не реагировал на щелчок и не изменял состояние проверки. Однако после небольшой помощи Telerik / Progress я нашел другой способ сделать это, который работает.

Флажок, который находится вне * ngfor и работает, использует атрибут id и атрибут «for» метки для связи. Изначально я не видел способа сделать это с динамически генерируемыми объектами, потому что идентификатор не может быть установлен c, или у вас есть набор элементов с одинаковым идентификатором. Я попытался использовать {{}}, чтобы сделать идентификатор уникальным, но это не сработало. Однако я обнаружил, что есть привязка [id], которая работает. Затем я нашел привязку [htmlFor] для метки. Использование их в комбинации, кажется, работает правильно.

Итак, мой окончательный код: 

<div *ngFor="let option of RoleOptions">
    <input type="checkbox" class="k-checkbox" [(ngModel)]="option.Selected" style="width: auto" [id]="option.Role.Id">
    <label class="dialogLabels k-checkbox-label" [htmlFor]="option.Role.Id">{{option.Role.Name}}</label>
</div>

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

...