When looping through objects with criteria, displays empty bullets when not matched

Question

I am new to Angular and I'm sure this is a pretty basic question but I want to display a list of Symptoms matching a specific SymptomID. I have the following code which checks if the specific symptom is of a specific type but when the type is not correct, the code still outputs a blank bullet in its place.

<h1>Symptoms</h1>
<h2> {{symptomtypes[0].Description}}</h2>
<li *ngFor="let symptom of symptoms">
    <p *ngIf="(symptom.SymptomTypeID == 1)"> {{symptom.Description}}</p>
</li>
<h2> {{symptomtypes[1].Description}}</h2>
<li *ngFor="let symptom of symptoms">
    <p *ngIf="(symptom.SymptomTypeID == 2)"> {{symptom.Description}}</p>
</li>
<h2> {{symptomtypes[2].Description}}</h2>
<li *ngFor="let symptom of symptoms">
    <p *ngIf="(symptom.SymptomTypeID == 3)"> {{symptom.Description}}</p>
</li>

I expect the list to output as follows:
Symptom Type 1

Symptom Type 1
Symptom Type 1
Symptom Type 1

Symptom Type 2
Symptom Type 2
Symptom Type 2
Symptom Type 2

Symptom Type 3
Symptom Type 3
Symptom Type 3
Symptom Type 3

But instead I get something like:
Symptom Type 1
Blank
Blank
Symptom Type 1

Symptom Type 2
Symptom Type 2
Blank
Symptom Type 2

Symptom Type 3
Symptom Type 3
Blank
Blank

I would suggest [using `reduce` to group your array into an object](https://stackoverflow.com/q/40774697/215552) instead of using indexes like that. — Heretic Monkey, May 21 '19 at 19:42

score 0 · Answer 1 · answered May 21 '19 at 19:46

Your code isn't the ideal way to display values, but for this particular case. I guess the solution you are looking for is.

<h2> {{symptomtypes[2].Description}}</h2>
<li *ngFor="let symptom of symptoms">
    <p *ngIf="(symptom.SymptomTypeID == 3) && symptom.Description"> {{symptom.Description}}</p>
</li>

score 0 · Answer 2 · answered May 21 '19 at 19:47

You need to know that every iteration of *ngFor the html element on which you have applied *ngFor is created (see docs). Because of that you have the empty entries.

In your case I would suggest you to use a pipe to filter your array.

@Pipe({ name: 'filterSymptom' })
export class FilterSymptomPipe implements PipeTransform {
    transform(symptoms: Symptom[], id: number) {
        return symptoms.filter(s => s.SymptomTypeID  === id);
    }
}

And in your html:

<li *ngFor="let symptom of symptoms | filterSymptom: 3">
    <p"> {{symptom.Description}}</p>
</li>

And to improve your code generally I would suggest you to do something like following:

<ng-template *ngFor="let symptomtype of symptomtypes; let index=index;">
    <h2> {{symptomtype.Description}}</h2>
    <li *ngFor="let symptom of symptoms | filterSymptom: index + 1]">
        <p"> {{symptom.Description}}</p>
    </li>
</ng-template>

With this way you prevent the usage of hard coded indexes.

score 0 · Accepted Answer · answered May 21 '19 at 19:55

I guess the solution you are looking for is.

<h1>Symptoms</h1>
<h2> Symptom Type 1</h2>
<div *ngFor="let symptom of symptoms">
  <li *ngIf="(symptom.SymptomTypeID == 1)&& (symptom.Description)">
    {{symptom.Description}}
  </li>
</div>
<h2> Symptom Type 2</h2>
<div *ngFor="let symptom of symptoms">
  <li *ngIf="(symptom.SymptomTypeID == 2)&& (symptom.Description)">
    {{symptom.Description}}
  </li>
</div>
<h2> Symptom Type 3</h2>
<div *ngFor="let symptom of symptoms">
  <li *ngIf="(symptom.SymptomTypeID == 3) && (symptom.Description)">
    {{symptom.Description}}
  </li>
</div>

When looping through objects with criteria, displays empty bullets when not matched

3 Answers3