Question

我有这个标记：

<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: []
    };

Answer 1

您应该在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 />

Answer 2

请稍等一下。此信息/答案基于您的另一个与以下相同代码有关的问题：your other question

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

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>

Answer 3

我不知道 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 = '';
}   
}

click here to see exaple

Angular NgFor始终穿入输入对象的最后一个值

3 个答案: