Динамически отображаемое значение в angular

Question

В моем шаблоне мне нужно отображать текст «Пропущено», только если item.name === 'michael' не соответствует истине. Мой компонент имеет данные courses[], поступающие от его родителя. У меня есть два интерфейса Курсы и Учителя, в которых каждый идентификатор курса имеет свои данные Учителя.

Вот мой код:

  @Input() courses[];
  isRequired = false;
  ngonInit() {
     for (const entry of courses ) {
      this.onCheckData(entry);
    }
  }

  onCheckData(singleList: Courses) {
    this.someService.someObservable(singleList.id).subscribe( item => {
        if (item.name === 'michael') {
            this.isRequired = true; 
         }
        });
       }

  declare interface courses {
      id: number;
      name: string;
      price: number;
}

declare interface Teachers {
  name : string;
  address: string;
}

Установка true / false с переменной isRequired, похоже, не работает. someObservable () возвращает Observable<Teacher>, используя http.

<tbody>
    <tr *ngFor="let listing of courses">
      <td>
        {{listing.name}}
      </td>
      <td>
        <span *ngIf="!isRequired"> Passed </span> // not working here
      </td>
</tbody>

Answer 1

isRequired будет установлено для всех компонентов, если один из элементов имеет имя.

Вы можете попробовать listing.name === 'michael', если имя находится внутри списка.

<tbody>
    <tr *ngFor="let listing of courses">
      <td>
        {{listing.name}}
      </td>
      <td>
        <span *ngIf="listing.name === 'michael'"> Passed </span> // not working here
      </td>
</tbody>

Answer 2

Ваш isRequired также должен быть наблюдаемым.

Попробуйте так:

public isRequired$ = new ReplaySubject<boolean>(1);

, а затем

onCheckData(singleList: Courses) {
this.someService.someObservable(singleList.id).subscribe( item => {
    if (item.name === 'michael') {
        this.isRequired$.next(true);
     }
    });
   }

Не долларовое соглашение для наблюдаемого

<span *ngIf="!isRequired$"> Passed </span>