角度视图模型及其在组件中的用法

Question

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

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的正确方法？

Answer 1

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

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

因此，在视图中，如果具有([ngModel])=quantity.name或([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>