如何隐藏一个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()

Demo Stackbiltz

在这里您可以查看没有任何破解的简单代码。

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