Angular-material, how to bind an object array

Question

I'm dealing with this code which was written by another developer, and I'm not used to angular. I'm trying to bind the data.order.order_items to an object in the component, to do an additional logic in the component side when the user clicks the button.

<!-- 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 side

@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.

How can I bind the data from the data.order.order_items that is updated in that input, to the object this.orderItems? I tried with the ngModel, but I guess i'm missing something or doing it in the wrong element.

Thanks in advance!

Answer 1

you are binded the data but forgot to display data you can use following syntax {{element }}

Answer 2

you should use the ngModel inside input tag to get the value from corresponding input tag or another option is to use formControl to get the value

1. NG Model <input matInput maxlength="5" [value]="element.quantity" tabindex="-1" [disabled]="!isChecked" [(ngModel)]="orderItems" />

2. Form Control

visit this site -> https://angular.io/api/forms/FormControl