How to declare ngif value by concatenate in angular-CodePudding

Trying to hide bullet point by ngIf but not working. How to declare an ngif value by concatenating If anyone knows, please help to find the solution.

app.component.html:

<mat-list>
    <mat-list-item *ngFor="let season of seasons; index as i">
        <span *ngIf="season.toLowerCase().split(' ').join('')   i" ></span>
        <p (click)="hides(season)" matLine>{{ season }}</p>
    </mat-list-item>
</mat-list>

Demo : https://stackblitz.com/edit/angular-8-material-starter-template-uewc3u?file=src/app/app.component.html

CodePudding user response：

OK, your solution is overcomplicated. Just store the index of clicked position

<p matLine (click)="hides(i)">{{ season }}</p>

  hiddenIndex = -1;

  hides(val: number) {
    this.hiddenIndex = val;
  }

and hide the element:

    <span  *ngIf="hiddenIndex !== i"></span>

The groupid0 and the rest of the variables should go. Here's a modified stackblitz: https://stackblitz.com/edit/angular-8-material-starter-template-fkttxa?file=src/app/app.component.ts

CodePudding user response：

You can't use ngIf like that in angular. Instead you can define a getter:

component.ts

class YourComponent {
    private _seasons: string[] = [ /* original seasons array */ ]

    public get seasons() {
        return this._seasons.map((s, i) => ({
            _original: s,
            get condition() {
                return this._original
                    .toLowerCase()
                    .split(' ')
                    .join('')   i
            }
        }))
    }
}

and component.html

<mat-list>
    <mat-list-item *ngFor="let season of seasons">
        <span *ngIf="season.condition" ></span>
        <p (click)="hides(season)" matLine>{{ season }}</p>
    </mat-list-item>
</mat-list>

CodePudding user response：

here is my edited stackblitz stackblitz

you can simplify your code without so many if statements

html

<mat-list>
  <mat-list-item *ngFor="let season of seasons; index as i">
    <span  *ngIf="!season.isBulletHidden"></span>
    <p matLine (click)="hides(i)">{{ season.name }}</p>
  </mat-list-item>
</mat-list>

 seasons: any[] = 
  [
    {name: 'Group id'},
    {name:'Group name'},
    {name:'Group value'},
    {name: 'Group area'}
  ];

 hides(index: any) {
    this.seasons[index].isBulletHidden = true;
  }