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它将显示在下一行

3月4月//＆如果我没有单击任何年份，它将给出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];
}

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

3 个答案: