angular - 下拉列表过滤
问题描述
我有一个名为应用程序的下拉列表和另一个名为导航的下拉列表。所有导航项都有一个对应的应用程序 ID,可以根据在第一个下拉列表中选择的应用程序进行过滤。
如何将应用程序下拉列表中的应用程序 ID 传递给导航组件?
我尝试使用 @Input('value') appId: number; 在 navigation.component.ts 中从应用程序组件中获取 app.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>
应用程序.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; } );
}
}
导航.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>
导航.component.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);
}
}
解决方案
app-application
创建一个服务,您可以使用该服务在组件中发生更改时传递数据。您可以Subject
为此使用 a 。
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;
});
})
}
推荐阅读
- reactjs - React Native Redux 一起使用 state props 和 selectors
- python - 如何有效地重新编码?
- python - 无法减少为纸浆添加约束所花费的时间
- c - 如何在 MICROCHIP XC8 的库中正确使用 __delay_ms()?
- c++ - 如何使用 Lua 从表中的表中获取值?
- javascript - Adyen 自定义卡片标签导航在最新版本中无法正常工作
- javascript - Next-Pwa 无法在 Nginx 等生产服务器上运行
- cakephp - 在 CakePHP 中创建搜索表单
- apache-nifi - NiFi 问题:记录包含双引号时的 UpdateRecord 问题
- python-3.x - 尝试在 macOS 上添加 Pygame 时如何修复错误代码“command '/usr/bin/gcc' failed with exit code 1”