Блог

Главная - Вопросы по программированию - Как получить все отмеченные флажки в * ngFor?

Как получить все отмеченные флажки в * ngFor?

#angular

#angular

Вопрос:

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

Итак, у меня есть * ngFor, подобный этому, где я отображаю ингредиенты тарелки:

           <div
            class="col-sm-6 affiancato"
            *ngFor="let ingrediente of ingredientiPlu"
          >
            <div class="form-check">
              <label class="custom-constrol">
                <input
                  class="form-check-input"
                  checked="true"
                  type="checkbox"
                  [value]="ingrediente"
                  (change)="checkVariante(ingrediente, $event)"
                />
                {{ ingrediente.desc }}
              </label>
            </div>
          </div>

В то время как ingrediente — это следующий класс:

 export class Varianti {
    constructor(
        public id?: string,
        public desc?: string,
        public prezzo?: number,
        public prezzo_meno?: number,
        public menu?: number[],
        public stato?: string,
        public ingrediente?: boolean
    ){}
}

variante.ingrediente это свойство объекта, по которому я фильтрую объект в двух подмассивах:

    varianti.filter((variante: Varianti) => {
      variante.ingrediente
        ? this.ingredientiPlu.push(variante)
        : this.variantiPlu.push(variante);
    });

Как я могу получить все отмеченные флажки для объекта Variant при нажатии кнопки?

Ответ №1:

В вашей функции изменения вы могли бы сделать что-то вроде этого:

 checkVariante(): void {
   /** other code */

   /** on change filter all true ingrediente to a component variable allChecked */
   this.allChecked = this.ingredientiPlu.filter(i => i.ingrediente);
}

Комментарии:

1. На самом деле ingrediente: boolean это не поле, в котором указывается, отмечен объект или нет, но это свойство объекта.

2. Что тогда им управляет? Я в замешательстве, потому что в конце вашего вопроса вы заявляете, что хотите получить все отмеченные флажки, которые соответствуют связанному объекту Variant. Если это так, вы должны использовать [ngModel], чтобы привязать значение ingrediente к флажку

3. на самом деле я не могу добавить другой параметр в Varianti, который будет управлять, отмечен объект или нет, поскольку я должен повторно отправить объект на сервер как есть. итак, я искал что-то вроде цикла или idk, что будет перебирать флажки и получать значение объекта из тех, которые отмечены

4. Какое значение задает начальное состояние флажка?

5. по умолчанию флажок не установлен, поэтому флажки не установлены, в то время как другая категория флажков по умолчанию установила значение true в html

Ответ №2:

Решается путем создания массива, Varianti в который я нажимаю или удаляю объект (change) следующим образом:

       <div
        class="col-sm-6 affiancato"
        *ngFor="let variante of variantiPlu"
      >
            <input
              class="form-check-input"
              type="checkbox"
              (change)="checkVariante(variante, $event)"
            />
            {{
              variante.desc 
            }}
      </div>

  checkVariante(oVariante: Varianti, event: any): void {
    const variante = Object.assign({}, oVariante); // cloning Varianti object to don't affect the original one.
    if (event.target.checked) { // checking if the checkbox has been checked
        variante.prezzo = variante.ingrediente ? 0 : variante.prezzo; // changing object properties
        variante.stato = variante.ingrediente ? 'SENZA' : 'PIU';
        this.checkedVariants.push(variante); // pushing object to Varianti[]
    }else {
      this.checkedVariants = this.checkedVariants.filter(v => v.id !== variante.id); // if the checkbox has been unchecked removing the object from the array
    }
    console.log(this.checkedVariants);
  }