Angular 2 final - 将过滤器数据从 Filter.Component 传递到 App.component
Angular 2 final - Passing Filter Data from Filter.Component to App.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) 并将 select 框的值传递回列表组件 (app.ts ) 适当地使用@Input 和@Output 函数。
我这里已经分离了组件,但是我无法获取传递给列表组件的数据。 (app.ts): http://plnkr.co/1ZEf1efXOBysGndOnKM5
提前致谢。
点击按钮必须输出,
看到这个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;
}
}
希望对您有所帮助!!
我创建了一个简单的过滤应用程序,当我在同一个组件 (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) 并将 select 框的值传递回列表组件 (app.ts ) 适当地使用@Input 和@Output 函数。
我这里已经分离了组件,但是我无法获取传递给列表组件的数据。 (app.ts): http://plnkr.co/1ZEf1efXOBysGndOnKM5
提前致谢。
点击按钮必须输出,
看到这个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;
}
}
希望对您有所帮助!!