下拉列表筛选

Question

我有一个名为application的下拉列表和另一个名称为navigation的下拉名单。所有导航项都具有相应的应用程序id，该应用程序id可以基于在第一下拉列表中选择的应用程序进行过滤。

如何将应用程序ID从应用程序下拉列表传递到导航组件？

我尝试使用@Input('value'(appId:number；在navigation.component.ts中获取应用程序。Id，但它不起作用。

这是我的代码：

app.component.html

<app-application></app-application>
<br/>
<app-navigation></app-navigation>

application.component.html

<mat-form-field>
<mat-select placeholder="applications">
<mat-option *ngFor="let app of apps" [value]="app.Id">
{{app.ApplicationName}}
</mat-option>
</mat-select>
</mat-form-field>

application.component.ts

import { Component, OnInit, AfterViewInit } from '@angular/core';
import { ApplicationService } from '../application.service';
import { IApplication } from '../IApplication';
@Component({
selector: 'app-application',
templateUrl: './application.component.html',
styleUrls: ['./application.component.css']
})
export class ApplicationComponent implements AfterViewInit {
apps: Array<IApplication>;
constructor(private applicationService: ApplicationService) { }
ngAfterViewInit() {
this.applicationService
.getApplications()
.subscribe(data => {this.apps = data; } );
}
}

navigation.component.html

<mat-form-field>
<mat-select placeholder="navigations">
<mat-option *ngFor="let nav of navigations" [value]="nav.Id">
{{nav.NavName}}
</mat-option>
</mat-select>
</mat-form-field>

导航组件.ts

import { Component, OnInit, AfterViewInit, Input } from '@angular/core';
import { NavigationService } from '../navigation.service';
import { INavigation } from '../INavigation';
@Component({
selector: 'app-navigation',
templateUrl: './navigation.component.html',
styleUrls: ['./navigation.component.css']
})
export class NavigationComponent implements AfterViewInit {
appId = 1;
//@Input('value') appId: number;
navigations: Array<INavigation>;
constructor(private navigationService: NavigationService) { }
ngAfterViewInit() {
this.navigationService
.getNavigations(this.appId)
.subscribe(data => {this.navigations = data; });
console.log(this.appId);
}
}

Answer 1

创建一个服务，当数据在app-application组件中发生更改时，可以使用该服务传递数据。您可以为此使用Subject。

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs'
@Injectable()
export class ShareAppIdService {
constructor() { }
private appId = new Subject();  // private subject
public changeAppId(value) {   // use this method in the app-application to send the appId to app-navigation
this.appId.next(value);
}
public appIdChanged = this.appId.asObservable();  // subscribe this in app-navigation to get the changed data
}

在应用程序组件中，将一个点击侦听器连接到选项

<mat-form-field>
<mat-select placeholder="applications">
<mat-option (click)="sendChangedId(app.Id)" *ngFor="let app of apps" [value]="app.Id">
{{app.ApplicationName}}
</mat-option>
</mat-select>
</mat-form-field>

在应用程序组件的ts文件中，注入ShareAppIdService服务，并使用如下方法：

sendChangedId(appId) {
this.sharedAppIdService.changeAppId(appId);
}

在您的应用程序导航ts中，注入共享服务并订阅appIdChanged。

ngAfterViewInit() {
this.sharedAppIdService.appIdChanged.subscribe((appId) => {
this.navigationService
.getNavigations(appId).subscribe(
(data) => {
this.navigations = data;
});
})
}