Dynamically display value in angular

Question

In my template, I need to display the text 'Passed' only if item.name === 'michael'is not true.My component has data courses[] coming from its parent. I have two interfaces Courses and Teachers where each course id has its own Teacher data.

Here is my code:

  @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;
}

Setting true/false with variable isRequired does not seem to work. someObservable() is returning an Observable<Teacher> using http.

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

Akora · Accepted Answer · 2020-04-02 14:18:05Z

1

isRequired will be set for all components, if one of the items has the name.

You could try listing.name === 'michael', if the name is inside of the listing.

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

answered Apr 2, 2020 at 14:18

Akora

8558 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

vikingsteve · Accepted Answer · 2020-04-02 14:16:09Z

0

Your isRequired should also be an observable.

Try like this:

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

and then

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

Not the dollar convention for an observable

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

answered Apr 2, 2020 at 14:16

vikingsteve

40.7k25 gold badges120 silver badges164 bronze badges

Collectives™ on Stack Overflow

Dynamically display value in angular

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related