Question

我在Angular2应用程序上选择框以显示默认选项时遇到问题＆＃39; - 请选择 - ＆＃39;在页面加载。我之前设法让它工作，但我似乎无法在这个特定的实例中使用它。我展示了我的代码然后解释。

这是我的相关控制器代码：

import {Component} from "@angular/core";
import {ProductService} from "../../services/product.service";
import {Subscription} from "rxjs";
import {ActivatedRoute} from "@angular/router";

@Component({
    selector    : 'product',
    moduleId    : module.id,
    templateUrl : '/app/views/products/product-view.html'
})

export class ProductComponent {
    private id:number;
    private _subscription: Subscription;
    public product;
    private price;
    private quantity = 0;

    constructor(
        private _productService: ProductService,
        private _activatedRoute: ActivatedRoute
    ) {

    }

    getProduct(productId: number) {
        this._productService.getProduct(productId)
            .subscribe((response) => {
                response.success.product.options.forEach((option) => {
                    this[option.name] = {
                        name: '-- please select --',
                        product_option_value_id: 0,
                        price: 0,
                        price_prefix: '+'
                    };
                    option.product_option_value.unshift({
                        name: '-- please select --',
                        product_option_value_id: 0,
                        price: 0,
                        price_prefix: '+'
                    });
                });
                this.product = response.success.product;
                this.generatePrice();
            });
    }

    changeOption(optionValueId, option) {
        if(optionValueId != 0) {
            let selectedOptionValue = option.product_option_value.filter((option) => {
                return option.product_option_value_id == optionValueId;
            });

            this[option.name] = selectedOptionValue[0];

        } else {
            this[option.name] = {
                name: '-- please select --',
                product_option_value_id: 0,
                price: 0,
                price_prefix: '+'
            };
        }

        this.generatePrice();
    }
.....

我在这里收到有关产品的信息，其中包括＆＃39;选项＆＃39;以数组的形式。迭代此对象数组以在视图代码中创建稍后将出现的选择框。我添加了默认设置＆＃39; - 请选择 - ＆＃39;每个选项的对象，并使用unshift将其放在数组的前面。然后我还在行中设置控制器值：

this[option.name] = {
    name: '-- please select --',
    product_option_value_id: 0,
    price: 0,
    rice_prefix: '+'
};

相关的观看代码如下：

<div class='product-options'>
                <div class='option' *ngFor='let option of product.options; let i = index'>
                    <p class='option-name' [innerHTML]='option.name'></p>
                    <select name='option.name' [ngModel]='option.name' (ngModelChange)='changeOption($event, option)' required>
                        <option *ngFor='let productOptionValue of option.product_option_value; let j = index;' [value]='productOptionValue.product_option_value_id'>{{ productOptionValue.name }}</option>
                    </select>
                </div>
                <div class='price' ngDefaultControl [(ngModel)]="price">{{ price | currency:'GBP':true:'1.2-2' }}</div>
                <div class='add-to-basket-wrap'>
                    <button class='add-to-basket'>add to basket</button>
                    <button class='increment' (click)="changeQuantity('down')">-</button>
                    <input type='text' name='quantity-to-add' [(ngModel)]="quantity" (click)='addToBasket()' />
                    <button class='increment'(click)="changeQuantity('up')">+</button>
                </div>
            </div>

在这里，我遍历选项，然后通过这些选项的值来生成选择框。我将select的[ngModel]属性设置为与我的控制器中保存的属性相同。我的印象是Angular2会检测到这个绑定，发现该值与控制器值相同，然后自动将其设置为“已选择”##默认选项。

谁能明白为什么这不起作用？

由于

Answer 1

您的代码看起来无效，因为您的模板和类没有绑定到相同的属性。

在您的组件模板中，当您这样写时：

<div *ngFor="let option of product.options; let i = index">
  <select [ngModel]="option.name">...</select>
</div>

...您将每个<select>有效地绑定到名为product.options[i].name的类属性。

另一方面，在你的组件类中，当你写这个：

changeOption(optionValueId, option) {
  this[option.name] = selectedOptionValue[0];
}

...你正在写一个以option.name中包含的任何字符串命名的类属性，例如foo。

如您所见，product.options[i].name和foo不匹配。即使将foo更改为其他字符串，您也无法访问所需的属性。

可能会有所帮助的一些评论/问题：

在“动态”类属性中存储选项有点奇怪 - this[option.name] = ...。为什么不将它们存储在专用的this.options属性中，您可以声明，输入和注销以进行调试：this.options[option.name] = ...。
您为什么决定使用<select [ngModel]="..." (ngModelChange)="..."> vs更紧凑的<select [(ngModel)]="...">？
您在HTML属性上使用简单引号的任何原因，例如<div class='price'> vs <div class="price">？这不是通常的风格。

Angular2默认选择＆＃39;选择选项未设置

1 个答案: