如何隐藏 ngFor 的 div 并根据之前的 ngFor 显示

Question

我想获取我单击的特定年份的月份线，以便能够将其链接到更多数据集。

<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"}
    ]
  }
];

每年和每个月的数据都相互关联。因此，如果我单击 2019 年，然后选择在给定年份可用的年份。

输出格式

年栏
给定年份可用的月份栏。

如果没有选择年份，它会自动指向最近年份的月份。就像在给定的 json 中一样，它应该给出 2019 年的月份。

预期输出

2019 2018 2017 2016 2015 // 如果我点击 2018 它将显示在下一行

march april // & 如果我没有点击任何年份，它将给出 2019 年。

Answer 1

试试这样：

模板：

<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()

见Demo Stackbiltz

Answer 2

在这里您可以检查简单的代码而无需任何破解。

您的 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

中查看输出

Answer 3

试试下面的代码

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];
}