Извиняюсь, если этот вопрос ТОЧНЫЙ был задан где-то еще, поскольку я искал в Интернете, но я нашел несколько похожих сценариев и их решений, но не тот, который я ищу. Надеясь, что кто-то может помочь мне в этом. Так вот,
I need to obtain the value of all the checkboxes that have been checked. The checkboxes are dynamically created based on the number of Array (assets) items
Я создаю форму, которая использует нгфор для просмотра массива и создания флажков для каждого поля. Итак, что я сделал, это что-то вроде этого,
<form>
<div class = "row"><label>Assets</label></div>
<div *ngFor='let asset of assets' [(ngModel)]='assets'>
<div class = "col-8"><input type = "checkbox" name = "{{asset}}" (change) = "onChange()"></div>
<div class = "col-35"><label>{{asset}}</label></div>
</div>
</form>
Существует множество решений снаружи, но, к сожалению, все приходят с примером, где массив больше похож на пару Key:Value, например,
this.someArray = [
{id:1, name: someName, isSelect: false},
{id:2, name: someOtherName, isSelect: false}
]
Я понимаю, как работать с такой структурой массива, но в моем случае у меня есть следующий массив строк,
assets: String[] = ['one', 'two', 'three'];
Мой вопрос в том, как я могу получить все значения, которые были проверены, когда у меня есть только простой массив строк. То, что я сделал до сих пор, это что-то вроде этого, актив.component.html
<form>
<div class = "row"><label>Assets</label></div>
<div *ngFor='let asset of assets' [(ngModel)]='assets'>
<div class = "col-8"><input type = "checkbox" name = "{{asset}}" (change) = "onChange()"></div>
<div class = "col-35"><label>{{asset}}</label></div>
</div>
</form>
актив.компонент.тс
export class AppComponent {
name = 'Angular ' + VERSION.major;
assets: String[] = ['one', 'two', 'three'];
onChange(): void {
alert(this.assets);
}
}
Любая помощь будет оценена. С нетерпением ждем от вас в ближайшее время,
Для справки, вот реализация StackBlitz (еще не завершена),
https://stackblitz.com/edit/angular-ivy-jtnzhp?file=src/app/app.component.html
С уважением
Я бы порекомендовал вам сначала взглянуть на этот angular.io/guide/reactive-forms#creating-dynamic-forms, вы могли бы вместо кнопки добавить больше просто сделать это на основе данных, которые вы хотите добавить в форму.
Допустим, вы хотите передать имя свойства this.someArray, что вы можете сделать примерно так:
(change) = "onChange(asset.name)"
Вы можете сделать что-то вроде этого:
HTML-файл:
<div *ngFor = "let asset of assets">
<input (change) = "onChange(asset)" type = "checkbox" value = "{{ asset }}" />{{asset}}
</div>
Файл TypeScript:
assets: string[] = ['one', 'two', 'three'];
all_selected_values: string[] = [];
onChange(value: string): void {
if (this.all_selected_values.includes(value)) {
this.all_selected_values = this.all_selected_values.filter((item) => item !== value);
} else {
this.all_selected_values.push(value);
}
console.info(this.all_selected_values);
}
Блестяще!!! Не понимал, что это было так просто, и меня поразило, что я не нахожу эту информацию ни в одном из онлайн-учебников ... все работает очень четко, двумерные массивы и просто используют ключ, работает стиль значения. , Но эй, это работало как чудеса. Спасибо
Используете ли вы флажок Angular Material или собственный элемент ввода флажка, как в примере Stackblitz?