Получить выбранные значения флажков в Angular 5

Question

У меня есть элемент управления списком флажков, и я пытаюсь получить проверенные значения в массив.

Мои модели:

export class Order {
    Products: Product[];
    SelectedProducts: string[];
}

export class Product {
    Id: number;
    Title: string;
}

Фрагмент проходит через свойство Product и отображает их в виде флажков:

    <div *ngFor="let product of orderService.order.Products">

        <label>
            <input type="checkbox" name="orderService.order.Products" value="{{product.Id}}" [(ngModel)]="product.checked" />
            {{product.Title}}
        </label>

    </div>

Я могу получить список orderService.order.Products значений из флажков, но как их отфильтровать, чтобы при отправке получать только проверенные значения?

Я основал свой код на ответе @ccwasden здесь: Angular 2: Получить значения нескольких отмеченных флажков , но моя модель Product не имеет свойства checked и не должна иметь.

В моем компоненте у меня есть:

get selectedOptions() {
    return this.orderService.order.Products
        //.filter(opt => opt.checked)
        .map(opt => opt.value)
}

submitorder(form: NgForm) {
    var selection = this.selectedOptions;

    [post order here]
}

но selectedOptions пусто.

EDIT

Это правильный код для метода selectedOptions() (примечание opt.Id, а не opt.value, как указано выше):

get selectedOptions() {
    return this.orderService.order.Products
        //.filter(opt => opt.checked)
        .map(opt => opt.Id)
}

Но главный вопрос остается - как получить проверенные опции?

Answer 1

Вы допустили небольшую ошибку. Исправлено:

get selectedOptions() {
    return this.orderService.order.Products
        .filter(opt => opt['checked'])
        .map(opt => opt.Id);
}

Каждый «opt» является «продуктом», поэтому у него нет «значения».

С другой стороны, я не думаю, что value="{{product.Id}}" добавляет что-либо к функциональности, поскольку ngModel на самом деле является значением входного тега. Надеюсь, это поможет:)

РЕДАКТИРОВАТЬ: Если checked не является частью модели, просто напишите product['checked'] вместо product.checked.