The strange problem of angular ng-for

there is a code that looks like this

menu.preiods.key in click event I directly use preiod instead of menu.preiods, preiod.key, which is feasible

but in the
paragraph of menu.precursors [I] .key of class.active, if preiod is used instead of menu.preiods, preconditions [I] .key, an error will be reported

.

Why is this?

<ul>
      <ng-container *ngFor="let preiod of menu.preiods; let i = index">
        <li (click)="sport.update_preiod(menu.preiods.key);" [class.active]="selected.preiod == menu.preiods[i].key">{{text[preiod.textId]}}</li>
      </ng-container>
    </ul>
  
Feb.25,2022

preiod is an element in menu.periods. You can use period.key instead of menu.preforms.key

Menu