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: Get Values of Multiple Checked Checkboxes，但是我的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为空。

编辑

这是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);
}

每个“选择”都是“产品”，因此它们没有“值”。

另一方面，我不认为value="{{product.Id}}"会向功能添加任何内容，因为ngModel实际上是输入标记的值。希望这会有所帮助：）

编辑：如果checked不属于模型，则只需编写product['checked']而不是product.checked。

获取Angular 5中的选定复选框值

1 个答案: