Angular 4- *ngFor not functioning on Array of Objects

Question

I have some problems in looping at the html side using *ngFor on the data received from the REST service below is what i am doing:

  getQuestionaire(type: String) {
    const url = `${this.questionaireTypeUrl}/${type}`;
    return this.http.get(url).map(
      (response: Response) => {const questioniares: any[] = response.json();
        return questioniares;
      }
    );
  }

Here i call the function in one of the app.component.ts:

  ngOnInit() {
    this.route.params
    .subscribe(
      (params: Params) => {
        this.quesType = params['type'];
        this.questionaireService.getQuestionaire(this.quesType).subscribe(
          (questionaires: any[]) => {
            this.questionaire = questionaires;
            console.log(this.questionaire);
          }
        );
      }
    );
  }

Here i am looping using *ngFor on the html side and creating a table dynamically

<table class="table ">
      <thead>
        <tr>
          <th class="active">QUESTIONAIRE NAME</th>
          <th class="active">LEVEL</th>
          <th class="active">LAST MODIFIED</th>
          <th class="active">PUBLISHED BY</th>
          <th class="active">VALIDITY DATE</th>
        </tr>
      </thead>
      <tbody *ngFor="let questionaireEl of questionaire">
        <tr>
          <td>{{ questioniareEl.nameQuestionaire }}</td>
          <td>{{ questionaireEl.levelQuestionaire }}</td>
          <td>{{ questionaireEl.lastUser }}</td>
          <td>{{ questionaireEl.publishingUser }}</td>
         </tr>
      </tbody>
 </table>

Problem: The console logs the data i am looping on it consists of an array of objects and i can't figure out how could i access the elements i need to display please help!!

Is questioniares declared with empty array in the class definition? If not set it to []. — Gunner
– Gunner, Commented Feb 20, 2018 at 16:00
@match both solution i have tried and they worked...But i would like to know the role of the wild card operator ? — Adnan Abdul Khaliq
– Adnan Abdul Khaliq, Commented Feb 20, 2018 at 16:30

Mixalloff · Accepted Answer · 2018-02-20 16:12:51Z

1

You need to use async pipe <tr *ngFor="let questionaireEl of questionaire | async">...

Or you can write

<td>{{ questioniareEl?.nameQuestionaire }}</td>
<td>{{ questionaireEl?.levelQuestionaire }}</td>
...

to avoid that error

answered Feb 20, 2018 at 16:12

Mixalloff

8374 silver badges10 bronze badges

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

2 Comments

Adnan Abdul Khaliq Over a year ago

Yes it solved for me thank you! But i would like to know the role of the wild card operator ?

Mixalloff Over a year ago

This operator prevent evaluating of expression, if object before '?' has null/undefined value. That avoid exception and not break your app

micronyks · Accepted Answer · 2018-02-20 16:39:28Z

1

Here ?. comes to rescue

generally when async call happens, you exactly don't know when would result come/arrive to the template. But other hand, template would get parsed to HTML and it would want to display the data that have not yet arrived from the async call.
So until data comes back, ?. operator would wait (& would not throw any template error).
once data arrives, ?. operator allows to print the arrived data.

eg.

{{questioniareEl?.nameQuestionaire}}

answered Feb 20, 2018 at 16:39

micronyks

55.6k17 gold badges122 silver badges166 bronze badges

Collectives™ on Stack Overflow

Angular 4- *ngFor not functioning on Array of Objects

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related