Angular - 编辑网格中的文本框以更新行值

Question

我试图让用户能够在产品结账之前更新其选择的数量。下面的代码只允许文本框中包含 1 个字符。我可以进行哪些更改以允许用户输入最多 2 个字符？

https://stackblitz.com/edit/angular-kfiqrb?file=src%2Fapp%2Ftable-basic-example.html 这个解决方案有效，但该列是一个 div 而不是文本框

export class ProductSelection {
  id!: number;
  name!: string;
  itemPrice!: number;
  quantity!: number;
  totalPrice!: number;
}

html 文件

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>ItemPrice</th>
      <th>Quantity</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody *ngFor="let p of products; let i = index">
    <tr>
      <td>{{ p.name }}</td>
      <td>{{ p.itemPrice }}</td>
      <td>
        <input type="text" value="{{ p.quantity }}" (input)="quantitychange($event, i)" />
      </td>
      <td>{{ p.totalPrice }}/td></td>
    </tr>
  </tbody>
</table>

<div>
 <input type="button" (click)="checkout()" value="submit" />
</div>

.ts 文件

products: ProductSelection[] = [];

  constructor() {
    this.products= [
     { id = 1, name = "name1", itemPrice: 3, quantity: 3, totalPrice: 9 },
     { id = 1, name = "name2", itemPrice: 1, quantity: 10, totalPrice: 10 },
     { id = 1, name = "name3", itemPrice: 4, quantity: 4, totalPrice: 16 }
    ]
  }
  

  quantitychange(event: any, row: number) {
    let item = this.products[row];
    item.totalPrice = (item.itemPrice * Number(event.data));
    item.quantity = event.data;
    this.products[row] = item;
  }

  checkout() {
   let total = 0;
   this.products.foreach(i => total += i.totalPrice);
   //send to service
  }

当我使用 (focusout) 事件时，我得到的事件数据为未定义。

PS： 抱歉，我无法从我的机器访问 github，否则我会为此创建 stackblitz。还有其他选择吗？

Answer 1

您只需使用

Template Driven Forms

即可，

[(ngModel)]

将以两种方式将值绑定到数据对象，以便当您在代码中更新时，它将反映在 UI 中，当您输入 HTML 时，它将更新数据。每当输入发生变化时，您都可以使用

(ngModelChange)

触发计算，我还更改了输入以仅接受数字值！

模板驱动表单文档

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
export class ProductSelection {
  id!: number;
  name!: string;
  itemPrice!: number;
  quantity!: number;
  totalPrice!: number;
}
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, FormsModule],
  template: `
   <table>
  <thead>
    <tr>
      <th>Name</th>
      <th>ItemPrice</th>
      <th>Quantity</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody *ngFor="let p of products; let i = index">
    <tr>
      <td>{{ p.name }}</td>
      <td>{{ p.itemPrice }}</td>
      <td>
        <input type="number" [(ngModel)]="p.quantity" (ngModelChange)="quantitychange($event, i)" />
      </td>
      <td>{{ p.totalPrice }}</td>
    </tr>
  </tbody>
</table>

<div>
 <input type="button" (click)="checkout()" value="submit" />
</div>
  `,
})
export class App {
  products: ProductSelection[] = [];

  constructor() {
    this.products = [
      { id: 1, name: 'name1', itemPrice: 3, quantity: 3, totalPrice: 9 },
      { id: 1, name: 'name2', itemPrice: 1, quantity: 10, totalPrice: 10 },
      { id: 1, name: 'name3', itemPrice: 4, quantity: 4, totalPrice: 16 },
    ];
  }

  quantitychange(event: any, row: number) {
    let item = this.products[row];
    item.totalPrice = item.itemPrice * Number(event);
    item.quantity = event.data;
    this.products[row] = item;
  }

  checkout() {
    let total = 0;
    this.products.forEach((i) => (total += i.totalPrice));
    alert(`Total Checkout quantity: ${total}`);
    //send to service
  }
}

bootstrapApplication(App);

Stackblitz 演示