Angular 6: Как создать простой множественный флажок для проверки / снятия флажка пользователем? - PullRequest
0 голосов
/ 29 августа 2018

Я пишу этот пост после прочтения нескольких тем по этой теме, но никто из них не дает мне то, что мне нужно. Этот пост , кажется, имеет решение, но мне не нужно читать проверенные значения из json.

Все, что мне нужно, это:

  1. чтение стран из массива объектов
  2. построить динамически список флажков, представляющих каждую страну
  3. пользователь должен установить и снять каждый флажок

    бонус:

    • получить значение проверенного ввода и отправить его за пределы компонента

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

Вот код: Шаблон:

<div class="form-group">
    <div *ngFor="let country of countries">
        <input type="checkbox"
                  name="countries"
                  value="{{country.id}}"
                  [(ngModel)]="country"/>

        <label>{{country.name}}</label>
    </div>
</div>

И ТС:

countries = [
    {id: 1, name: 'Italia'},
    {id: 2, name: 'Brasile'},
    {id: 3, name: 'Florida'},
    {id: 4, name: 'Spagna'},
    {id: 5, name: 'Santo Domingo'},
]

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

Ответы [ 3 ]

0 голосов
/ 29 августа 2018

Вот рабочий пример, где вы можете заметить, что дополнительное «проверенное» значение добавляется к каждой стране и привязывается к значению каждого флажка с помощью [(ngModel)].

Пример использования Stackblitz

шаблон:

<code><p>
Test checkboxes
</p>

<div *ngFor="let country of countries; let i = index;">
  <input type="checkbox" name="country{{country.id}}" [(ngModel)]="countries[i].checked">
  <label for="country{{country.id}}">{{country.name}}</label>
</div>

<button type="button" (click)="sendCheckedCountries()" *ngIf="countries">Click to send the selected countries (see your javascript console)</button>

<p *ngIf="!countries">loading countries, please wait a second...</p>
<p *ngIf="countries">Debug info : live value of the 'countries' array:</p>

<pre>{{ countries | json }}

компонент:

//...
export class AppComponent implements OnInit  {
  public countries: Country[];

  constructor(private countryService: CountryService) {}

  public ngOnInit(): void {
    // loading of countries, simulate some delay
    setTimeout(() => {
       this.countries = this.countryService.getCountries();
    }, 1000);
  }

  // this function does the job of sending the selected countried out the component
  public sendCheckedCountries(): void {
    const selectedCountries = this.countries.filter( (country) => country.checked );
    // you could use an EventEmitter and emit the selected values here, or send them to another API with some service

    console.log (selectedCountries);
  }
}

Чтобы использовать какой-то правильный TypeScript, я сделал интерфейс Country:

interface Country {
    id: number;
    name: string;
    checked?: boolean;
}

Я надеюсь, вы поняли идею сейчас.

Примечание: проверенное значение не «автоматически появляется» в начале, но это не имеет значения.

Если его там нет, оно совпадает с undefined, и это будет рассматриваться как false как в флажке, так и в функции, которая читает, какая страна отмечена.

Для части "Отправка значения":

Кнопка выведет выбранное значение на консоль браузера с некоторым фильтром, подобным тому, что предлагает ответ @ Eliseo (я просто использовал полные объекты страны вместо идентификаторов)

Для ситуации "реального варианта использования" вы можете использовать EventEmitters Angular и заставить ваш компонент "излучать" значение родительскому компоненту или вызывать некоторую сервисную функцию, которая отправит POST-запрос ваших значений другому API.

0 голосов
/ 08 апреля 2019

У меня была ошибка при использовании [(ngModel)]

На случай, если это кому-нибудь поможет, я решил проблему, изменив [(ngModel)] чтобы:

[checked]="countries[i].checked" (change)="countries[i].checked= !countries[i].checked"
0 голосов
/ 29 августа 2018

Ваши страны, как

{id: 1, name: 'Italia',checked:false},

Ваш HTML как

<div *ngFor="let country of countries">
  <input type="checkbox" [(ngModel)]="country.checked"/>
  <label>{{country.name}}</label>
</div>

Вы получите массив, например,

 [{id: 1, name: 'Italia',checked:false},{id: 2, name: 'Brasile',checked:tue}..]

вы можете сделать

result=this.countries.filter(x=>x.checked).map(x=>x.id)
//result becomes [2,...]
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...