Angular Viewmodels 和组件中的使用 [英] Angular Viewmodels and usage in components

问题描述

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

model: any = {租户 ID: '',自定义字段名称:'',数量:[]};数量:任意 = {价钱: ''，姓名: ''}

然后点击按钮添加

的新对象<块引用>

型号

我是这样做的:

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

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

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

Pricegridquantity 视图模型:导出类 PriceGridQuantity {价格:字符串；名称:字符串；}

价格网格视图模型

 import { PriceGridQuantity } from './pricegridquantity';导出类 PriceGridModel {租户 ID:编号；自定义字段名称:字符串；价目表:数组 ;}

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

<块引用>

模型:PriceGridModel[] = [];

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

如果不是，请告诉我什么更好.

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

解决方案

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

数量:任意 = {价钱: ''，姓名: ''}

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

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

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

更好的实现是拥有一个 newQuantityObject 和一个对象，该对象具有一个数组属性，用于存储每个新添加的数量.那么你不需要任何新的类来实现.例如:

newQuantity = {价钱: ''，姓名: ''};型号:任何 = {租户 ID: '',自定义字段名称:'',数量:[]};添加新数量(){if (this.newQuantity.price !== '' && this.newQuantity.name !== '') {this.model.quantities.push(this.newQuantity);新数量 = {价钱: ''，姓名: ''};}}

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

<div *ngFor="let数量的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"/>

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

Then on button click for adding new object of

model

I was doing this:

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 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[] = [];

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

If no, please let me know what is better.

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

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

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

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>

这篇关于Angular Viewmodels 和组件中的使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！