Angular-material，如何绑定对象数组

Question

我正在处理由另一个开发人员编写的这段代码，我不习惯 Angular。 我正在尝试将 data.order.order_items 绑定到组件中的一个对象，以便在用户单击按钮时在组件端执行附加逻辑。

<!-- some code -->

    <form class="form">
      <h4 class="sku-list-title">SKU List</h4>
      <mat-slide-toggle
        [checked]="isChecked"
        (change)="isChecked = $event.source.checked"
        class="toggle"
        >Edit SKUs</mat-slide-toggle
      >
      <div
        class="item-container"
        *ngFor="let element of data.order.order_items"
        [(ngModel)]="orderItems"
      >
        <mat-form-field>
          <mat-label>SKU</mat-label>
          <input
            [value]="element.item.seller_sku"
            matInput
            tabindex="-1"
            [disabled]="true"
          />
        </mat-form-field>
        <mat-form-field>
          <mat-label>New SKU</mat-label>
          <input
            [placeholder]="element.item.new_seller_sku"
            matInput
            tabindex="-1"
            [disabled]="!isChecked"
          />
        </mat-form-field>
        <mat-form-field>
          <mat-label>Quantity</mat-label>
          <input
            matInput
            maxlength="5"
            [value]="element.quantity"
            tabindex="-1"
            [disabled]="!isChecked"
          />
        </mat-form-field>
      </div>
    </form>
  </div>

<!-- some code -->
<div mat-dialog-actions class="actions full-width">
  <button mat-flat-button color="warn" (click)="onNoClick()">Cancel</button>
  <button
    mat-flat-button
    color="primary"
    (click)="onClick()"
    [mat-dialog-close]="closeAnswer"
  >
    Accept
  </button>
</div>

组件端

@Component({
  selector: "app-message-dialog",
  templateUrl: "./message-dialog.component.html",
  styleUrls: ["./message-dialog.component.scss"],
})
export class MessageDialogComponent implements OnInit {
  orderItems: any; //This object would bind the order_items
  //some code

 onClick() {
  //some code
  this.orderItems //doesn't get the binded data.

如何将在该输入中更新的 data.order.order_items 中的数据绑定到对象 this.orderItems？ 我尝试使用 ngModel，但我想我遗漏了某些内容或在错误的元素中执行了此操作。

提前致谢！

Answer 1

您已绑定数据但忘记显示数据您可以使用以下语法 {{element }}

Answer 2

您应该使用输入标签内的 ngModel 从相应的输入标签中获取值，或者另一种选择是使用 formControl 来获取值

1. NG 模型

2. 表单控件

访问这个网站 -> https://angular.io/api/forms/FormControl