如何在Angular中相互链接和路由两个ngFor循环？

Question

我正在尝试使用角度构建一个网页。我只需要连接与第一个 ngFor 循环相关的第二个 ngFor 循环的数据。

HTML代码

<div *ngFor="let year of years">
    <h2> {{year}} </h2>   // For displaying the year row
    </div>


<div *ngFor="let month of months">
    <h4> {{month}}</h4> // For displaying the month row
    </div>


//Now i need to print all the data respect to each month and data.

year = ['2019','2018','2017','2016']

month = ['jan','feb','mar','apr','may','jun','jul', 'aug','sep','oct','nov','dec']

Output should be like 

2019 2018 2017 2016

1月 2月 3月 4月 6月 8月 8月 9月 10月 12月

（每个月和每年的所有数据都应如图所示）

2019

8月8日 - 数据

8月5日-数据

6月28日-数据

1月5日-数据

2018

12月29日-数据

12月21日-数据

10月18日-数据

（依此类推…）

如果我们点击任何一年，页面就会滚动到那一年。可能有当年全部12个月的数据，也可能只有几个月的数据。假设我们点击2018年，那么页面将滚动到2018年，然后“如果”我点击“10月”，如果有2018年10月的数据，那么它将滚动到那里，否则什么也不会发生。它不能滚动到任何其他年份的10月。

The structure of data is like 

year -- date -- data
2019 -- 8th aug -- data
2019 -- 5th aug -- data

Answer 1

这是一种基于你在描述中所提供的方法。您只需要根据第一个列表的选定项目过滤第二个列表。Stackblitz演示

import {
  Component
} from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  alphaBet: string;
  english = ['a', 'b', 'c', 'd', 'e', 'f'];

  name = ['a1', 'a2', 'a3', 'a4',
    'b1', 'b2', 'b3', 'b4',
    'c1', 'c2', 'c3', 'c4',
    'd1', 'd2', 'd3', 'd4',
    'e1', 'e2', 'e3', 'e4',
    'f1', 'f2', 'f3', 'f4'
  ];

  scrollToNames(val) {
    const elems = [].slice.call(document.getElementsByClassName('names'));
    const macthes = elems.filter((item) => {
      return item.innerHTML.includes(val);
    });
    macthes[0].scrollIntoView();
  }
}

<div *ngFor="let alphabets of english">
  <h2 (click)="scrollToNames(alphabets)"> {{alphabets}} </h2>
</div>


<div *ngFor="let names of name">
  <h4 class="names"> {{names}}</h4>
</div>

Answer 2

<div *ngFor="let alphabets of english">
    <h2 (click)=scrollToLetter(alphabets)> {{alphabets}} </h2>
    </div>


<div *ngFor="let names of name">
    <h4 id="{{names}}">{{names}}</h4>
    </div>

然后在您的 TypeScript 中：

public scrollToLetter(letter) {
  console.log(`scrolling to ${letter}`);
  var id = this.name.find(function(element) {
      return element.toLowerCase().startsWith(letter);
  });
  if (id) {
      let el = document.getElementById(id);
      el.scrollIntoView();
  }
}

请记住将适当的样式应用于可滚动列表，例如：

  height: 50px;
  max-height:50px;
  overflow-y: scroll;

Answer 3

您可以像下面这样编写第二个循环。

#1

<ng-container *ngFor="let names of name">
   <div *ngIf="names.startsWith(selectedAlphabets)">
     <h4> {{names}}</h4>
   </div>
</ng-container>

虽然这不是很好的方法，因为每次你改变选择的字母，根据它将不得不再次迭代整个列表。如果你可以改变你的名字列表到字母字符到名称列表的映射，那么它会更快，因为它可以直接选择所选字母的列表，如下所示。

#2

    import {
      Component
    } from '@angular/core';

    @Component({
      selector: 'my-app',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent implements OnInit {

      alphaBet: string;
      english = ['a', 'b', 'c', 'd', 'e', 'f'];

      name = ['a1', 'a2', 'a3', 'a4',
        'b1', 'b2', 'b3', 'b4',
        'c1', 'c2', 'c3', 'c4',
        'd1', 'd2', 'd3', 'd4',
        'e1', 'e2', 'e3', 'e4',
        'f1', 'f2', 'f3', 'f4'
      ];

      nameMap = new Map<string, string[]>();

      public ngOnInit(){
          this.generateNameMap();
      }

      generateNameMap() {
        for (const item of this.name) {
            if (!this.nameMap.get(item.charAt(0))) {
                this.nameMap.set(item.charAt(0), []);
            }

            this.nameMap.get(item.charAt(0)).push(item);
        }
      }


      /* other code */
    }

并将第二个for循环html部分更改为如下

<div *ngFor="let names of nameMap.get(selectedAlphabets)">
  <h4> {{names}}</h4>
</div>