angular - 显示和隐藏下拉列表Angular 9的容器
问题描述
我有三个下拉列表和三个组件来呈现结果。这可以正常工作,但是一旦选择了一个,另一个仍然存在。我已经搜索了答案,ngIf 是最好的答案吗?如果是这样,我该如何实现这些布尔标志?
html
<div class="container-fluid">
<div class="row">
<div class="col-md-6 offset-md-3">
<mat-form-field style="width:100%;">
<mat-label>Choose a Category</mat-label>
<mat-select [(value)]="category" (selectionChange)="searchByCategory() ">
<mat-option *ngFor="let n of nobelCategory" [value]="n.name">
{{n.name}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="col-md-6 offset-md-3">
<mat-form-field style="width:100%;">
<mat-label>Choose a Country</mat-label>
<mat-select [(value)]="country" (selectionChange)="searchByCountry() ">
<mat-option *ngFor="let c of countries" [value]="c.name">
{{c.name}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="col-md-6 offset-md-3">
<mat-form-field style="width:100%;">
<mat-label>Choose a year</mat-label>
<mat-select [(value)]="year" (selectionChange)="searchByYear() ">
<mat-option *ngFor="let year of numbers" [value]="year">
{{year}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<!-- CARDS RESULT-->
<app-card-winners [nobelWinner]="nobelWinner"></app-card-winners>
<app-selection [countryWinner]="countryWinner"></app-selection>
<app-winners-by-year [years]="years"> </app-winners-by-year>
<!-- CARDS RESULT END-->
</div>
</div>
TS:
searchByCategory() {
console.log(this.category)
this.dataService.searchByCategory(this.category)
.subscribe(data => {
this.nobelWinner = data
console.log(data)
this.isType='nobel';
})
}
我得到的错误是:Bindings cannot contaiagn assifments at column 8 [isType='nobel
解决方案
是的,您可以在这种情况下使用 ngIf
<app-card-winners *ngIf="isType== 'nobel'" [nobelWinner]="nobelWinner"></app-card-winners>
<app-selection *ngIf="isType== 'winner'" [countryWinner]="countryWinner"></app-selection>
<app-winners-by-year *ngIf="isType== 'years'" [years]="years"> </app-winners-by-year>
在组件中创建变量,如isType="";
然后在更改事件函数searchByCountry()
, searchByYear()
, searchByCategory()
.
例如,
searchByCategory(){
//your conditions...
this.isType='nobel';
}
推荐阅读
- java - 我们可以在 url 的请求参数值中发送 '%' 符号吗
- django - 在 vue axios 请求中附加标头
- gitlab - 本地 Gollum 渲染 AsciiDoc WIKI 页面 - 启用 Kroki?
- python - 如何在 yocto 中安装 botocore
- java - 在对象上添加/删除功能的范例
- components - 文本区域中的 Vaadin 14 最大行数
- mysql - 用浮点数理解递归 cte
- database-design - 使用表作为数组来实现一对多关系会更好吗?
- android - 如何在 android 上的 html 文件中使用我的 css 文件?
- sql - 我认为这两个 SQL 查询是相同的,但答案是不同的。有什么区别?