Angular Viewmodels 和在组件中的使用答案

【问题标题】：Angular Viewmodels and usage in componentsAngular Viewmodels 和在组件中的使用
【发布时间】：2020-01-09 14:25:10
【问题描述】：

我正在尝试通过组件将视图模型绑定到视图。最初我在组件中这样做，它几乎可以工作：

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; 
}

Pricegrid 视图模型

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

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

模型：PriceGridModel[] = [];

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

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

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

【问题讨论】：

标签： angular angular7 angular-components angular8 angular-arrays

【解决方案1】：

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

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

因此，在视图中，如果您有 ([ngModel])=quantity.name 或 ([ngModel])=quantity.price，它将绑定到数量值。这是有问题的，因为您在 addNewQuantity 函数中设置值 quantity.name。

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>

【讨论】：