角度视图模型及其在组件中的用法 [英] Angular Viewmodels and usage in components

问题描述

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

I'm trying to bind viewmodels to a view through component. Initially I did this in the component and it was almost working:

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

上述事件的问题在于，每次新点击都添加了相同数量的对象.

The issue with above event was that the same quantity object was added for every new click.

接下来我要做的是创建了两个模型:

What I did next is that I created two models:

Pricegridquantity viewmodel: 

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

Pricegrid视图模型

Pricegrid viewmodel

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

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

Now I'm trying to link everything in the component, I have this:

model:PriceGridModel [] = [];

model: PriceGridModel[] = [];

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

Is the statement above correct to initialize a new VM of type PriceGridModel?

如果没有，请告诉我哪个更好.

If no, please let me know what is better.

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

And 2nd, on the button click to add new object of type PriceGridQuantity to PriceGridModel, what is the correct way of initializing and then adding object of type PriceGridQuantity to the PricegridModel?

推荐答案

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

The reason for the list of quantities being the same is because you have an object called quantity accessible to the entire view via this declaration:

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

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

So in a view if you have the ([ngModel])=quantity.name or ([ngModel])=quantity.price it will be bound to the values in quantity. This is problematic because you are setting the value quantity.name in the addNewQuantity function.

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

因此，任何使用([ngModel])=quantity.name设置的模板现在都将具有上一个功能中设置的值.

So any template that is set with ([ngModel])=quantity.name will now have the value set in the previous function.

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

A better implementation is to have a newQuantityObject and an object that has an array property that stores each newly added quantity. Then you don't need any new classes to implement. For example:

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

然后您可以在这样的视图中显示数量对象的列表:

Then you could display the list of quantity objects in a view like this:

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

这篇关于角度视图模型及其在组件中的用法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！