1

我正在尝试通过组件将视图模型绑定到视图。最初我在组件中执行此操作，它几乎可以正常工作：

model: any = {
        TenantId: '',
        CustomFieldName: '',
        quantities: []
    };

quantity: any = {
        price: '',
        name: ''
    }

然后在按钮上单击以添加新对象

模型

我正在这样做：

addNewQuantity() {
        if (this.newQuantity) {
            this.quantity.name = this.newQuantity;
            this.model.quantity.push(this.quantity);
            this.newQuantity = '';
        }
    }

上述事件的问题是每次新点击都会添加相同的数量对象。

接下来我创建了两个模型：

Pricegridquantity viewmodel: 

export class PriceGridQuantity {
    price: string;
    name: string; 
}

价格网格视图模型

 import { PriceGridQuantity } from './pricegridquantity';    
 export class PriceGridModel {  
    TenantId: number;
    CustomFieldName:string;  
    PriceList: Array <PriceGridQuantity> ; }

现在我正在尝试链接组件中的所有内容，我有这个：

模型：PriceGridModel[] = [];

上面的语句对于初始化 PriceGridModel 类型的新 VM 是否正确？

如果没有，请告诉我什么更好。

第二，在按钮上单击以将 PriceGridQuantity 类型的新对象添加到 PriceGridModel，初始化然后将 PriceGridQuantity 类型的对象添加到 PricegridModel 的正确方法是什么？

4

1 回答 1

1

数量列表相同的原因是因为您有一个名为数量的对象，可以通过此声明访问整个视图：

quantity: any = {
    price: '',
    name: ''
}

所以在一个视图中，如果你有([ngModel])=quantity.nameor([ngModel])=quantity.price它将被绑定到数量上的值。这是有问题的，因为您quantity.name在 addNewQuantity 函数中设置值。

addNewQuantity() {
    if (this.newQuantity) {
        this.quantity.name = this.newQuantity;
        this.model.quantity.push(this.quantity);
        this.newQuantity = '';
    }
}

因此，任何设置的模板([ngModel])=quantity.name现在都将具有在前一个函数中设置的值。

更好的实现是拥有一个newQuantityObject和一个对象，该对象具有一个存储每个新添加数量的数组属性。然后你不需要任何新的类来实现。例如：

newQuantity = {
    price: '',
    name: ''
};

model: any = {
    TenantId: '',
    CustomFieldName: '',
    quantities: []
};


addNewQuantity() {
    if (this.newQuantity.price !== '' && this.newQuantity.name !== '') {
        this.model.quantities.push(this.newQuantity);
        newQuantity = {
            price: '',
            name: ''
        };
    }
}

然后您可以在如下视图中显示数量对象列表：

<div *ngFor="let quantity of model.quantities; let i=index;" >
    <input type="text" value="{{quantity.name}}" [(ngModel)]="model.quantities[i].name" />
    <input type="text" value="{{quantity.price}}" [(ngModel)]="model.quantities[i].price"  />
</div>
于 2019-09-06T20:29:04.847 回答