如何在angular js html中更改为对象值数组答案

【问题标题】：How to change to array of object values in angular js html如何在angular js html中更改为对象值数组
【发布时间】：2023-01-19 15:37:07
【问题描述】：

我的对象数组：

MyCart = {
  cartID: "cart101",
  listProducts : [
      {pid:101, pname:"apple", price: 200, qty:3},
      {pid:102, pname:"banana", price: 100, qty:12}
   ]
}

我以 HTML 形式显示更新数量以获取数据并更新值以发送服务器

在对象值的角度和 html 更新数组中

【问题讨论】：

标签： angular typescript

【解决方案1】：

使用带有 ngmodel 表单属性的两种方式数据绑定：

应用程序组件.html

<form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate>
  <div *ngFor="let x of data; let i = index">
     <input name="qty" [(ngModel)]="data?.listProducts[i]?.qty">
  </div>
  <button>Submit</button>
</form>

应用程序组件.ts

 @Component({
  selector: 'app.component',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  data = {
     cartID: "cart101",
     listProducts : [
         {pid:101, pname:"apple", price: 200, qty:3},
         {pid:102, pname:"banana", price: 100, qty:12}
     ]
  }

  constructor() { }

  ngOnInit() {
  }

  onSubmit() { 
    // logic for sending this.data to backend server
  }
}

【讨论】：