Получить значения всех выбранных флажков с помощью Angular

Извиняюсь, если этот вопрос ТОЧНЫЙ был задан где-то еще, поскольку я искал в Интернете, но я нашел несколько похожих сценариев и их решений, но не тот, который я ищу. Надеясь, что кто-то может помочь мне в этом. Так вот,

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 Material или собственный элемент ввода флажка, как в примере Stackblitz?

NeNaD 18.03.2022 04:33

Я бы порекомендовал вам сначала взглянуть на этот angular.io/guide/reactive-forms#creating-dynamic-forms, вы могли бы вместо кнопки добавить больше просто сделать это на основе данных, которые вы хотите добавить в форму.

Henrik Bøgelund Lavstsen 18.03.2022 04:33
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
2
33
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Допустим, вы хотите передать имя свойства 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);
}

Рабочий пример

Блестяще!!! Не понимал, что это было так просто, и меня поразило, что я не нахожу эту информацию ни в одном из онлайн-учебников ... все работает очень четко, двумерные массивы и просто используют ключ, работает стиль значения. , Но эй, это работало как чудеса. Спасибо

rac3b3nn0n 22.03.2022 05:31

Другие вопросы по теме