Angular 2 ausblenden Elternelement auf klicken Sie auf Schließen Schaltfläche

Question

Ich bin neu in Angular2, ich möchte Elternelement nach dem Klicken auf das Schließen-Symbol ausblenden. Unten ist mein Code:

@Component({ 
    selector: 'add-search', 
    template: ` 
     <input type='text' #newHero 
     (keyup.enter)="addHero(newHero.value)" 
     (blur)="addHero(newHero.value); newHero.value='' "> 
     <button (click)=addHero(newHero.value)>Add</button> 
    <div> 
    <div [hidden]="hideElement" style="margin-right:2px" *ngFor="let hero of heroes" class="label label-primary">{{hero}}<span (click)="toggleElement()" style='cursor:pointer; display:inline-block; padding:1px 2px;'><i class="fa fa-times" aria-hidden="true" style="font-size:10px;"></i></span> 
</div> 
</div> 
    ` 
}) 
export class AddSearchComponent { 
    heroes = Array<string>(); 
    addHero(newHero: string) { 
     if (newHero) { 
      this.heroes.push(newHero); 
     } 
    } 
    private hideElement: boolean = false; 
    toggleElement() { 
     if (this.hideElement) { 
      this.hideElement = false; 
     else 
      this.hideElement = true; 
    } 
} 
} 

Ausblenden funktioniert nicht im Code. Können wir das auf eine einfache Art und Weise tun? oder was wird der beste Ansatz sein?

Answer 1

<div [hidden]="hero.hideElement" style="margin-right:2px" 
    *ngFor="let hero of heroes" 
     class="label label-primary">{{hero}} 

     <span (click)="hero.hideElement=!hero.hideElement" 
       style='cursor:pointer; display:inline-block; padding:1px 2px;'> 
       <i class="fa fa-times" aria-hidden="true" style="font-size:10px;"></i> 
     </span> 
</div> 

// toggle is not possible. 

ODER

<span *ngFor="let hero of heroes" 
     (click)="hero.hideElement=!hero.hideElement" 
     style='cursor:pointer; display:inline-block; padding:1px 2px;'> 
     <i class="fa fa-times" aria-hidden="true" style="font-size:10px;"></i> 

    <div [hidden]="hero.hideElement" style="margin-right:2px"   
      class="label label-primary"> 
      {{hero}}  
    </div> 
</span> 

// toggle is possible. 

aktualisieren:

waren Sie nicht klar, ob Sie Array oder Array von Objekten verwenden. SO gab ich Ihnen Lösung von Array von Objekten

Mit String-Array, ist es nicht möglich, ein Element mit * ngFor Schleife zu verstecken. Alles, was Sie tun können, ist Spleiß.

Hier beide Wege prüfen.

http://plnkr.co/edit/fc7x4nCh6vFIbIL2IX4I?p=preview