組件當值復位

Question

我有一個孩子組件，如下沒有得到清除，

兒童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> 

兒童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(); 
    } 
} 

我在父組件中使用這個子組件如下，

<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> 

當更改下拉列表設置正確，點擊清除過濾器我重置值。但值的變化沒有反映在父組件上。它仍然顯示選定的值。 這是清除選定值的功能。

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

這是什麼問題？

Answer 1

你不更新selectedItemName 使用這種替代@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; 
    } 
    }