javascript - casilla de verificación de Angular marcada

Estoy escribiendo un código donde, si un material está aprobado, aparecerá con una marca azul junto a él sin que yo tenga que marcar la casilla. Probé el método a continuación pero todavía puedo marcar la casilla, no viene ya marcada. Así es como debería verse cuando se abre la página:

¿Qué estoy haciendo mal?

HTML :

<ng-container matColumnDef="IsApproved">
                                    <th mat-header-cell *matHeaderCellDef> Ürün Onay Durumu </th>
                                    <td mat-cell *matCellDef="let row; let i = index">
                                        <mat-checkbox
                                            [(ngModel)]="row.IsApproved" [ngModelOptions]="{standalone: true}"
                                            binary="true"(onChange)="onChecked($event)"> Approved
                                        </mat-checkbox>
                                    </td>
                                </ng-container>

Código TS:

export class ManufacturerDetailComponent {
displayedColumns: string[] = [
        "IsApproved",
    ];
    IsApproved: boolean=false;
accept(){
        this.onChecked(true)
       }
   
       onChecked(e: any){
         this.IsApproved = true;
       }
}

Respuesta #1

Usa la propiedad [checked] para mostrar el estado seleccionado al inicio.

<mat-checkbox
     [(ngModel)]="row.IsApproved" [ngModelOptions]="{standalone: true}"
      binary="true"(onChange)="onChecked($event)"
      [checked]="row.IsApproved"> Approved
</mat-checkbox>

Respuesta #2

¿Has establecido la propiedad IsApproved en true?

Suponiendo que tienes algo como dataSource

dataSource = [
 {
   "IsApproved": true, //Set this to true so that row.IsApproved will mark the checkbox as checked
   ...
 },
 ...
]