0

我有这个标记：

<div *ngFor="let quantity of model.quantities">
                            <div class="form-group kt-form__group row">
                                <label class="col-lg-2 col-form-label">Quantity:</label>
                                <div class="col-lg-6">
                                    <mat-form-field class="example-full-width">
                                        <input matInput [(ngModel)]="quantity.name" name="quantityname" placeholder="Enter Quantity" type="text">
                                    </mat-form-field>
                                </div>
                            </div>
                            <div class="form-group kt-form__group row">
                                <label class="col-lg-2 col-form-label">Price:</label>
                                <div class="col-lg-6">
                                    <mat-form-field class="example-full-width">
                                        <input matInput [(ngModel)]="quantity.price" name="quantityprice" placeholder="Enter Price" type="text">
                                    </mat-form-field>
                                </div>
                            </div>
                            <hr />
                        </div>

每次我在模型中添加一个数量类型的新对象时，为数组中的每个对象设置相同的值，最后输入的值https://screencast-o-matic.com/watch/cqQ1Fbt4zL

这是按钮单击事件：

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

更新：模型添加：

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

3 回答 3

0

我不知道PriceGridQuantity()在做什么，但是，您每次都添加相同的对象引用，这就是为什么您在每个数量中获得相同值的原因。

你的代码应该是这样的

addNewQuantity() {
if (this.newQuantity) {
let quantity = new PriceGridQuantity();
quantity.name = this.newQuantity;
this.model.quantities.push({name:this.newQuantity,price:quantity.price});
this.newQuantity = '';
}   
}

点击这里查看示例

于 2019-09-06T21:38:19.100 回答
0

您应该在 Angular 中使用 FormBuilder 和 FormControls，但这里有一些可能会起作用

组件 TS

model = {
    id: '',
    name: '',
    quantities: [],
};

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

constuctor() {}

ngOnInit() {}

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

HTML

<div class="form-group kt-form__group row">
    <label class="col-lg-2 col-form-label">Quantity:</label>
    <div class="col-lg-6">
        <mat-form-field class="example-full-width">
            <input matInput [(ngModel)]="newQuantity.name" name="quantityname" placeholder="Enter Quantity" type="text">
        </mat-form-field>
    </div>
</div>
<div class="form-group kt-form__group row">
    <label class="col-lg-2 col-form-label">Price:</label>
    <div class="col-lg-6">
        <mat-form-field class="example-full-width">
            <input matInput [(ngModel)]="newQuantity.price" name="quantityprice" placeholder="Enter Price" type="text">
        </mat-form-field>
    </div>
</div>

<button (click)="addNewQuantity()">Add Quantity</button>

<div *ngFor="let quantity of model.quantities">
    <div class="form-group kt-form__group row">
        <label class="col-lg-2 col-form-label">Quantity:</label>
        <div class="col-lg-6">
            <mat-form-field class="example-full-width">
                <input matInput [(ngModel)]="quantity.name" name="quantityname" placeholder="Enter Quantity" type="text">
            </mat-form-field>
        </div>
    </div>
    <div class="form-group kt-form__group row">
        <label class="col-lg-2 col-form-label">Price:</label>
        <div class="col-lg-6">
            <mat-form-field class="example-full-width">
                <input matInput [(ngModel)]="quantity.price" name="quantityprice" placeholder="Enter Price" type="text">
            </mat-form-field>
        </div>
    </div>
    <hr />
于 2019-09-06T18:53:17.603 回答
0

花了我一秒钟。此信息/答案基于您似乎与此相同代码相关的其他问题：您的其他问题

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

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-06T19:07:16.420 回答