Angular nested *ngFor tags with *ngIf check (material data binding)

I have two nested *ngFor tags, the second one checks for db data and return che checkbox as checked if the value is matching. I want to display the results once, but I have repeated values based on perArr length. I have tried using *ngIf and binding [checked] value to permArr but I have errors (see this question). I'm usng Angular 6 and Material. How can I fix this?

component.html

<section *ngFor="let level of levels">
    <ng-container *ngFor="let perm of permArr">
        <div>
            <mat-checkbox [checked]=true *ngIf="level.name == perm.UP_P_ID; else notChecked"></mat-checkbox>
            <ng-template #notChecked>
                <mat-checkbox></mat-checkbox>
            </ng-template>
        </div>
    </ng-container>
    <hr>
</section>

component.ts

  permArr: object[];
  levels = [
    { name: 0, description: "Creazione nuovo utente" },
    { name: 1, description: "Reset password di qualsiasi utente" },
    { name: 2, description: "Eliminazione di qualsiasi utente" },
    { name: 3, description: "Modifica livello di qualsiasi utente" },
    { name: 4, description: "Rinnovo delle licenze" },
    { name: 5, description: "Gestione completa delle licenze" },
    { name: 6, description: "Gestione completa dei clienti" },
    { name: 7, description: "Gestione completa dei PC" }
  ];

console.log permArr

[
  { UP_ID: 5, UP_U_ID: 83, UP_P_ID: 0 },
  { UP_ID: 6, UP_U_ID: 83, UP_P_ID: 1 },
  { UP_ID: 7, UP_U_ID: 83, UP_P_ID: 2 }
]

browser screenshot