Вот рабочий пример, где вы можете заметить, что дополнительное «проверенное» значение добавляется к каждой стране и привязывается к значению каждого флажка с помощью [(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.