2角度最終 -

Question

をApp.componentするFilter.Componentからフィルタデータを渡す私は同じ成分（app.ts）におけるフィルタリングおよびリストを持っている場合、私は、動作する単純なフィルタリングアプリケーションを作成した：http://plnkr.co/0eEIJg5uzL6KsI70wWsC

@Component({ 
    selector: 'my-app', 
    template: ` 
    <select name="selectmake" [(ngModel)]="makeListFilter" (ngModelChange)="selectMake()"> 
    <option *ngFor="let muscleCar of muscleCars" [ngValue]="muscleCar">{{muscleCar.name}}</option> 
    </select> 

    <select name="selectmodel" [(ngModel)]="modelListFilter"> 
    <option *ngFor="let m of makeListFilter?.models" [ngValue]="m.model">{{m['model']}}</option> 
    </select> 

    <button class="btn btn-default" type="submit" (click)="searchCars()">FILTER</button> 

    <ul> 
    <li *ngFor="let _car of _cars | makeFilter:makeSearch | modelFilter:modelSearch"> 
     <h2>{{_car.id}} {{_car.carMake}} {{_car.carModel}}</h2> 
    </li> 
    </ul>`, 
    providers: [ AppService ] 
}) 

export class App implements OnInit { 
    makeListFilter: Object[]; 
    modelListFilter: string = ''; 

    _cars: ICar[]; 

    constructor(private _appService: AppService) { } 

    ngOnInit(): void { 
    this._appService.getCars() 
     .subscribe(_cars => this._cars = _cars); 
    } 

    selectMake() { 
    if(this.modelListFilter) { 
     this.modelListFilter = ''; 
    } 
    } 
    searchCars() { 
    this.makeSearch = this.makeListFilter['name']; 
    this.modelSearch = this.modelListFilter; 
    } 

私が達成したいのは、フィルタリングを独自のコンポーネント（filtering.component.ts）に移動し、選択ボックスの値を@Inputと@Outputを使用してリストコンポーネント（app.ts）に戻すことです。適切に機能する。

私は既にここでコンポーネントを分離していますが、データをリストコンポーネントに渡すことはできません。 （app.ts）：http://plnkr.co/1ZEf1efXOBysGndOnKM5

ありがとうございます。あなたはボタンをクリックしたときに出力する必要があります

Answer 1

、

このPlunker

フィルタ部品を参照してください

export class FilterComponent { 
    @Output() filtercars: EventEmitter<{make: string, model: string}> = new EventEmitter<{make: string, model: string}>(); 

    makeListFilter: Object[]; 
    modelListFilter: string = ''; 

    constructor(private _appService: AppService) {} 

    selectMake() { 
    if(this.modelListFilter) { 
     this.modelListFilter = ''; 
    } 
    } 

    searchCars() { 
    this.filtercars.emit({make: this.makeListFilter['name'],model: this.modelListFilter}); 
    } 

    muscleCars = [ 
    { 
     id: 1, name: "Chevrolet", models: [ 
     { model: "Camaro" }, 
     { model: "Corvette" } 
     ] 
    }, 
    { 
     id: 2, name: "Dodge", models: [ 
     { model: "Challenger" }, 
     { model: "Charger" }, 
     { model: "Viper" } 
     ] 
    }, 
    { 
     id: 3, name: "Ford", models: [ 
     { model: "GT" }, 
     { model: "Mustang" } 
     ] 
    } 
    ]; 
} 

アプリコンポーネント

@Component({ 
    selector: 'my-app', 
    template: ` 
    <filter-app (filtercars)='filtercars($event)'></filter-app> 
    <ul> 
    <li *ngFor="let _car of _cars | makeFilter:makeSearch | modelFilter:modelSearch"> 
     <h2>{{_car.id}} {{_car.carMake}} {{_car.carModel}}</h2> 
    </li> 
    </ul>`, 
    providers: [ AppService ] 
}) 
export class App implements OnInit { 

    @Input() makeSearch: Object[]; 
    @Input() modelSearch: string = ''; 

    _cars: ICar[]; 

    constructor(private _appService: AppService) { } 

    ngOnInit(): void { 
    this._appService.getCars() 
     .subscribe(_cars => this._cars = _cars); 
    } 

    filtercars(filter){ 
    this.makeSearch = filter.make; 
    this.modelSearch = filter.model; 
    } 
} 

これが役立つことを願っています！