I created an angular Quiz project, every ID can make quizzes and I want to display every Quiz that a logged user has done. I did it like this.

// here I call the user id and the id_category inside Result[], but I can't use it on the html part.
 ngOnInit() {
    this.supabase.authChanges((_, session) => this.session2 = session);
    this.getProfile();
    this.supabaseQuiz.getResult().subscribe((res: Result[]) => {
      let resultIdAns = res
      this.result = resultIdAns
      //here I get the result = [Object, Object]
    })
    
    //passare category id
    this.supabase.profile.then(profile => {
      if(profile.data){
        this.userProfile = profile.data
       
      }else{
        // this.router.navigateByUrl('account/addProfile')
      }
    })

  } 

this is the html part: here I try to if the result.id_category with the userID to display only his quiz but this if inside the for destroy all the table!

  <nz-table #headerTable [nzData]="result" [nzPageSize]="50" [nzScroll]="{ y: '240px' }">
    <thead>
      <tr>
        <th>Category</th>
        <th>Date</th>
        <th>Correct answers</th>
        <th>Final score</th>
        <th>Action</th>

      </tr>
    </thead>
  
    <tbody>
      
      
      <tr *ngFor="let res of result">
        <div *ngIf="this.userProfile?.id === res.id_profile">
        
        <td>{{ res.categoryTitle }}</td>
        <td>{{ res.date }}</td>
        <td>{{ res.rightAnswer }}</td>
        <td>{{ res.finalScore }}</td>
        
        <button nz-button nzType="primary" success (click)="goToDetail(parameterValue)">Dettagli</button>

        <!--<td>{{ res.json_answer }}</td>-->
        </div>
        
      </tr>
    
    </tbody>
  
  </nz-table>

there is way to do another subscribe maybe and get the result id_category outside the for? Thanks

CodePudding user response：

1- You can make the filtering of the ids check in the ts file using array.find() against res.id_profile and userProfile?.id.

2- You do not need to create a new property named resultIdAns since you can assign the API endpoint response to the result property directly.

3- You cannot make the *ngIf="" check outside the *ngFor="" because the condition predicate in the *ngIf="" depends on the variable named res from the outer element which is the container of *ngFor=""

4- Your usage of this. keyword in the template inside the *ngIf="" is invalid.

5- whenever you want to use structural directive it is better for performance reasons to use <ng-container *ngIf="" ></ng-container> or <ng-container *ngFor="" ></ng-container>