Komponente nicht gelöscht werden, wenn Werte zurückgesetzt werden

Question

ich eine untergeordnete Komponente haben, wie folgt,

Kinder component.html

<div > 
     <button type="button" data-toggle="dropdown" aria-haspopup="true" (click)="toggleDropdown()"> 
      {{ slectedItemName }} <span ></span> 
     </button> 
     <div *ngIf="showDropdown> 
      <ul class="default-dropdown"> 
       <li *ngFor="let item of list" (click)="onSelectItem(item.value)" [ngClass]="{'active': item.value==selected}"> 
        <a>{{item.name}}</a> 
       </li> 
      </ul> 
     </div> 
    </div> 

Kinder component.ts

import { Component, Input, Output, EventEmitter } from '@angular/core'; 
declare const _: any; 
@Component({ 
    moduleId: module.id, 
    selector: 'dropdown', 
    templateUrl: 'dropdown.component.html' 
}) 
export class DropdownComponent { 
    @Input() list: any; 
    @Input() selected: string; 
    @Output() onSelect = new EventEmitter<any>(); 
    showDropdown: boolean; 
    slectedItemName: string; 
    constructor() { 
    this.showDropdown = false; 
    } 
    ngOnInit() { 
    this.setSelected(this.selected); 
    } 
    setSelected(selected: string) { 
    const selectedItem = _.find(this.list, (item: any) => { 
     return item.value === selected; 
    }); 
    this.slectedItemName = selectedItem.name; 
    } 
    toggleDropdown() { 
    this.showDropdown = !this.showDropdown; 
    } 
    onSelectItem(selected: string) { 
    this.onSelect.emit(selected); 
    this.setSelected(selected); 
    this.toggleDropdown(); 
    } 
} 

Ich verwende diese untergeordnete Komponente in der übergeordneten Komponente wie folgt:

<div class="col-md-offset-2 col-md-8 search-filter-buttongroup-wrapper"> 
       <ul> 
        <li class="timeframe"> 
         <dropdown [list]="allRegions" [selected]="selectedRegion" (onSelect)="onSelectRegion($event)"> 
         </dropdown> 
        </li> 
        <li class="clear-text header-search-block-text" (click)="clearFilters()"> 
         <span><img src="../imgs/reset.svg">Clear Filters</span> 
        </li> 
       </ul> 
      </div> 

Wenn ich die Dropdown-Werte richtig ändere, klicke ich beim Löschen der Filter auf die Werte. Die Wertänderungen werden jedoch nicht in der übergeordneten Komponente berücksichtigt. Es zeigt immer noch die ausgewählten Werte an. Dies ist die Funktion zum Löschen der ausgewählten Werte.

clearFilters() {  
    this.selectedRegion = ''; 
    } 

Was ist das Problem?

Answer 1

Sie nicht aktualisieren selectedItemName Verwendung dieses statt @Input()selected:string:

selected:string; 
    @Input("selected") 
    set _selected(selected: string){ 
    this.selected = selected; 
    if(this.list){ 
     const selectedItem = _.find(this.list, (item: any) => { 
     return item.value === selected; 
     }); 
     this.slectedItemName = selectedItem.name; 
    } 
    }