如何在 angular 中使用异步方法获取价值？

问：

我需要在 *ngFor 中使用 EventStateName，如何使用异步方法获取值，但出错。

显示屏

错误屏幕

我在未定义值后调用了没有异步方法的getEventStateById，我对此进行了搜索，但坦率地说，我从解释中理解不多。你能帮我解决这个问题吗？

export interface EventState { id?: number; name: string; }

export class DashboardComponent {
  events: Event[] = [];

  constructor(private eventService: EventService, private eventStateService: EventStateService) { }

  ngOnInit() {
    this.getEvents();
  }

  getEvents() {
    this.eventService.getAll().subscribe({
      next: (data) => {
        if (data != null && data.length > 0) {
          this.events = data;
        }
      }
    });
  }

  getEventStateById(id: number): EventState {
    let eventState: EventState;

    this.eventStateService.getById(id).subscribe({
      next: (data) => {
        if (data != null) {
          eventState = data
        }
      }
    });

    return eventState;
  }
}

<ng-container *ngIf="events != null && events.length > 0">
    <tr *ngFor="let item of events">
        <td>
            #{{ item.id }}
        </td>
        <td>
            {{ item.title }}
        </td>
        <td>
            {{ item.location }}
        </td>
        <td>
            {{ item.eventDate | date: 'dd.MM.yyyy' }}
            <i class="mdi mdi-circle-medium text-muted align-middle"></i>
            {{ item.eventDate | date: 'HH:mm' }}
        </td>
        <td>
            {{ item.insertedDate | date: 'dd.MM.yyyy' }}
            <i class="mdi mdi-circle-medium text-muted align-middle"></i>
            {{ item.insertedDate | date: 'HH:mm' }}
        </td>
        <td>
            {{ item.updatedDate | date: 'dd.MM.yyyy' }}
            <i class="mdi mdi-circle-medium text-muted align-middle"></i>
            {{ item.updatedDate | date: 'HH:mm' }}
        </td>
        <td>
            {{ item.eventStateId }}
            <!-- {{ getEventStateById(item.eventStateId).name }} -->
        </td>
    </tr>
</ng-container>