如何隐藏一个div的ngFor并根据之前的ngFor显示
how to hide a div of ngFor and show according to previous ngFor
我想获取我单击的特定年份的月份行,以便我能够 link 将其添加到更多数据集。
<div class="list-float-right">
<ul >
<li *ngFor="let years of yearData">
<a href=#{{years.year}}>{{years.year}}</a>
</li>
</ul>
</div>
<hr>
<div class="list-float-right">
<ul>
<div *ngFor="let years of yearData">
<li *ngFor="let months of years.monthData">
{{months.month}}
</li>
<br>
</div>
</ul>
</div>
<div *ngFor="let years of yearData">
<div id={{years.year}}>
{{years.year}}
<br>
The color of animals <br>is by no means <br>a matter of chance;
<br>it depends on many considerations,
<br>but in the majority of cases tends to protect the animal
from danger by rendering it less conspicuous.
<hr>
</div>
yearData = [{
year:2019,
monthData: [
{ month : "jan"},
{ month : "july"}
]
},{
year:2018,
monthData: [
{ month : "march"},
{ month : "april"}
]
},{
year:2017,
monthData: [
{ month : "march"},
{ month : "dec"}
]
},{
year:2016,
monthData: [
{ month : "march"},
{ month : "feb"}
]
},{
year:2015,
monthData: [
{ month : "jan"},
{ month : "may"}
]
}
];
每年和每个月都会link编辑数据。因此,如果我单击 2019 年作为年份,然后选项出现在给定年份可用的年份。
输出格式
年栏
给定年份可用的月栏。
同样,如果没有选择年份,它会自动指向最近的年月。就像在给定的 json 中一样,它应该给出 2019 年的月份。
预期输出
2019 2018 2017 2016 2015 // 如果我点击 2018 它将显示在下一行
三月四月 // & 如果我没有点击任何年份,它将给出 2019 年。
这样试试:
模板:
<div class="list-float-right">
<ul>
<li *ngFor="let years of yearData">
<a href=#{{years.year}} (click)="selectedYear =years.year">{{years.year}}</a>
</li>
</ul>
</div>
<hr>
<div class="list-float-right">
<ul>
<div *ngFor="let years of yearData">
<ng-container *ngIf="years.year == selectedYear">
<li *ngFor="let months of years.monthData">
{{months.month}}
</li>
</ng-container>
</div>
</ul>
</div>
<div *ngFor=" let years of yearData ">
<ng-container *ngIf="years.year == selectedYear">
<div id={{years.year}}>
{{years.year}}
<br>
The color of animals <br>is by no means <br>a matter of chance;
<br>it depends on many considerations,
<br>but in the majority of cases tends to protect the animal
from danger by rendering it less conspicuous.
<hr>
</div>
</ng-container>
</div>
打字稿:
selectedYear:any = new Date().getFullYear()
在这里您可以查看没有任何破解的简单代码。
您的HTML代码
<div class="list-float-right">
<ul >
<li *ngFor="let years of yearData">
<a (click)="clickOnYear(years.year)">{{years.year}}</a>
</li>
</ul>
</div>
<hr>
<div class="list-float-right">
<ul>
<div *ngFor="let data of yearData">
<ng-container *ngIf="data.year == selectedYear" >
<li *ngFor="let month of data.monthData">
{{month.month}}
</li>
</ng-container>
<br>
</div>
</ul>
</div>
<div *ngFor="let years of yearData">
<div *ngIf="years.year == selectedYear">
{{years.year}}
<br>
The color of animals <br>is by no means <br>a matter of chance;
<br>it depends on many considerations,
<br>but in the majority of cases tends to protect the animal
from danger by rendering it less conspicuous.
<hr>
</div>
您的 .ts 代码
//declare global
yearData = [{
year:2019,
monthData: [
{ month : "jan"},
{ month : "july"}
]
},{
year:2018,
monthData: [
{ month : "march"},
{ month : "april"}
]
},{
year:2017,
monthData: [
{ month : "march"},
{ month : "dec"}
]
},{
year:2016,
monthData: [
{ month : "march"},
{ month : "feb"}
]
},{
year:2015,
monthData: [
{ month : "jan"},
{ month : "may"}
]
}
];
selectedYear = 2019;
//function
clickOnYear(val){
console.log(val)
this.selectedYear = val;
}
您可以在 LINK
中检查输出
试试下面的代码
HTML
<div class="list-float-right">
<ul>
<li *ngFor="let years of yearData">
<a href=#{{years.year}} (click)="selectedYear = years.year">{{years.year}}</a>
</li>
</ul>
</div>
<hr>
<div class="list-float-right">
<ul>
<div *ngFor="let years of yearData">
<ng-container *ngIf="years.year === selectedYear">
<li *ngFor="let months of years.monthData">
{{months.month}}
</li>
</ng-container>
</div>
</ul>
</div>
<div *ngFor=" let years of yearData">
<ng-container *ngIf="years.year === selectedYear">
<div id={{years.year}}>
{{years.year}}
<br>
The color of animals <br>is by no means <br>a matter of chance;
<br>it depends on many considerations,
<br>but in the majority of cases tends to protect the animal
from danger by rendering it less conspicuous.
<hr>
</div>
</ng-container>
</div>
打字稿
selectedYear: any;
ngOnInit() {
selectedYear = yearData.map(value=> value.year).sort((a, b) => a+b)[0];
}
我想获取我单击的特定年份的月份行,以便我能够 link 将其添加到更多数据集。
<div class="list-float-right">
<ul >
<li *ngFor="let years of yearData">
<a href=#{{years.year}}>{{years.year}}</a>
</li>
</ul>
</div>
<hr>
<div class="list-float-right">
<ul>
<div *ngFor="let years of yearData">
<li *ngFor="let months of years.monthData">
{{months.month}}
</li>
<br>
</div>
</ul>
</div>
<div *ngFor="let years of yearData">
<div id={{years.year}}>
{{years.year}}
<br>
The color of animals <br>is by no means <br>a matter of chance;
<br>it depends on many considerations,
<br>but in the majority of cases tends to protect the animal
from danger by rendering it less conspicuous.
<hr>
</div>
yearData = [{
year:2019,
monthData: [
{ month : "jan"},
{ month : "july"}
]
},{
year:2018,
monthData: [
{ month : "march"},
{ month : "april"}
]
},{
year:2017,
monthData: [
{ month : "march"},
{ month : "dec"}
]
},{
year:2016,
monthData: [
{ month : "march"},
{ month : "feb"}
]
},{
year:2015,
monthData: [
{ month : "jan"},
{ month : "may"}
]
}
];
每年和每个月都会link编辑数据。因此,如果我单击 2019 年作为年份,然后选项出现在给定年份可用的年份。
输出格式
年栏
给定年份可用的月栏。
同样,如果没有选择年份,它会自动指向最近的年月。就像在给定的 json 中一样,它应该给出 2019 年的月份。
预期输出
2019 2018 2017 2016 2015 // 如果我点击 2018 它将显示在下一行
三月四月 // & 如果我没有点击任何年份,它将给出 2019 年。
这样试试:
模板:
<div class="list-float-right">
<ul>
<li *ngFor="let years of yearData">
<a href=#{{years.year}} (click)="selectedYear =years.year">{{years.year}}</a>
</li>
</ul>
</div>
<hr>
<div class="list-float-right">
<ul>
<div *ngFor="let years of yearData">
<ng-container *ngIf="years.year == selectedYear">
<li *ngFor="let months of years.monthData">
{{months.month}}
</li>
</ng-container>
</div>
</ul>
</div>
<div *ngFor=" let years of yearData ">
<ng-container *ngIf="years.year == selectedYear">
<div id={{years.year}}>
{{years.year}}
<br>
The color of animals <br>is by no means <br>a matter of chance;
<br>it depends on many considerations,
<br>but in the majority of cases tends to protect the animal
from danger by rendering it less conspicuous.
<hr>
</div>
</ng-container>
</div>
打字稿:
selectedYear:any = new Date().getFullYear()
在这里您可以查看没有任何破解的简单代码。
您的HTML代码
<div class="list-float-right">
<ul >
<li *ngFor="let years of yearData">
<a (click)="clickOnYear(years.year)">{{years.year}}</a>
</li>
</ul>
</div>
<hr>
<div class="list-float-right">
<ul>
<div *ngFor="let data of yearData">
<ng-container *ngIf="data.year == selectedYear" >
<li *ngFor="let month of data.monthData">
{{month.month}}
</li>
</ng-container>
<br>
</div>
</ul>
</div>
<div *ngFor="let years of yearData">
<div *ngIf="years.year == selectedYear">
{{years.year}}
<br>
The color of animals <br>is by no means <br>a matter of chance;
<br>it depends on many considerations,
<br>but in the majority of cases tends to protect the animal
from danger by rendering it less conspicuous.
<hr>
</div>
您的 .ts 代码
//declare global
yearData = [{
year:2019,
monthData: [
{ month : "jan"},
{ month : "july"}
]
},{
year:2018,
monthData: [
{ month : "march"},
{ month : "april"}
]
},{
year:2017,
monthData: [
{ month : "march"},
{ month : "dec"}
]
},{
year:2016,
monthData: [
{ month : "march"},
{ month : "feb"}
]
},{
year:2015,
monthData: [
{ month : "jan"},
{ month : "may"}
]
}
];
selectedYear = 2019;
//function
clickOnYear(val){
console.log(val)
this.selectedYear = val;
}
您可以在 LINK
中检查输出试试下面的代码
HTML
<div class="list-float-right">
<ul>
<li *ngFor="let years of yearData">
<a href=#{{years.year}} (click)="selectedYear = years.year">{{years.year}}</a>
</li>
</ul>
</div>
<hr>
<div class="list-float-right">
<ul>
<div *ngFor="let years of yearData">
<ng-container *ngIf="years.year === selectedYear">
<li *ngFor="let months of years.monthData">
{{months.month}}
</li>
</ng-container>
</div>
</ul>
</div>
<div *ngFor=" let years of yearData">
<ng-container *ngIf="years.year === selectedYear">
<div id={{years.year}}>
{{years.year}}
<br>
The color of animals <br>is by no means <br>a matter of chance;
<br>it depends on many considerations,
<br>but in the majority of cases tends to protect the animal
from danger by rendering it less conspicuous.
<hr>
</div>
</ng-container>
</div>
打字稿
selectedYear: any;
ngOnInit() {
selectedYear = yearData.map(value=> value.year).sort((a, b) => a+b)[0];
}