使用两个不同的数组创建视图

Question

我有两个数组。第一个有classId和className

classes = [  {classid : 1 , classname:"class1"},{classid : 2 , classname:"class2"},{classid  : 3 , classname:"class3"}]

第二个数组是：

 subjectWithTopics = [
  {classid:1,subjectName:"hindi", topicName : "topic1 of hindi class id 10" },
  {classid:1,subjectName:"hindi", topicName : "topic2 of hindi class id 10" },
  {classid:1,subjectName:"English", topicName : "topic1 of English class id 10" },
  {classid:1,subjectName:"English", topicName : "topic2 of English class id 10" },
  {classid:1,subjectName:"English", topicName : "topic3 of English class id 10" },
  {classid:2,subjectName:"hINDI", topicName : "topic1 of hINDI class id 20" },
  {classid:2,subjectName:"HINDI", topicName : "topic2 of hINDI class id 20" },
  {classid:2,subjectName:"HINDI", topicName : "topic3 of HINDI class id 20" },
  {classid:2,subjectName:"English", topicName : "topic1 of English class id 20" },
  {classid:2,subjectName:"English", topicName : "topic2 of English class id 20" },
  {classid:2,subjectName:"English", topicName : "topic3 of English class id 20" },
]

我想要的是，在屏幕的左边，我将使用ngFor根据类数组显示按钮。在单击任何这些按钮时，屏幕的右边部分将显示该类的主题，该主题与该类中每个主题的主题一起单击。

我的想法是，我将捕获类的分类按钮，然后将排序的subjectWithTopics数组根据该id，但不知道下一步是什么。

如果有人可以的话请帮忙。

Answer 1

为此，您可以调用一个方法来筛选(或排序) subjectWithTopics数组，以便显示它。

假设您从右侧隐藏的表开始，单击按钮后将显示所选的classId。

因此，我们从打印所有按钮的ngFor开始：

<button *ngFor="let c of classes" (click)="selectClass(c)"> 
    {{ c.classname }} 
</button>

右手表(至少在本例中)应该显示给定classId的所有选定元素，或者在没有元素的情况下隐藏。我会这样做：

<table *ngIf="selectedSubjects && selectedSubjects.length > 0" >
    <tr>       
       <th> Subject name </th>
       <th> Subject name </th>
    </tr>
    <tr *ngFor="let subject of selectedSubjects">
       <th> {{ subject.subjectName }} </th>
       <th> {{ subject.topicName }} </th>
    </tr>
</table>

在控制器(.ts文件)中，编写"selectClass“函数，它将过滤subjectWithTopics数组，并将其放入新创建的数组"selectedSubjects”(您应该在控制器类中定义该数组)：

selectClass(selectedClass){
   this.selectedSubjects = subjectWithTopics.filter( topic => topic.classId === selectedClass.classid);
}

那应该就行了！

Answer 2

您可以将主题存储在变量中，并在html中呈现该变量。

只要单击了一个类，就可以编写一个函数来获取主题。为例

let subjects = [];
...
getSubjects(classId){
  this.subjects = this.subjectWithTopics.filter(subject=>subject.classId===classId)
}

然后在html中的for循环中呈现此函数。为例

<div ngFor="let subject of subjects">
</div>

Answer 3

component.html

<!-- display unique subject array and on setTopics() will filter topics by subject name-->
<h3>Classes</h3>
<div *ngFor="let classname of classes" style="display:inline-block;">
  <button style="margin: 0px 5px; color: blue;" (click)="setTopics(classname)">{{classname | uppercase}}  </button>
</div>
<h3>Topics</h3>
<div *ngFor="let topic of topics">
  <div (click)="setTopics(topic)">{{topic.topicName}}  </div>
</div>

compoent.ts

import { Component, VERSION, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  implements OnInit{
  name = 'Angular ' + VERSION.major;
  classesArray  = [
  {classid:1,subjectName:"hindi", topicName : "topic1 of hindi class id 10" },
  {classid:1,subjectName:"hindi", topicName : "topic2 of hindi class id 10" },
  {classid:1,subjectName:"English", topicName : "topic1 of English class id 10" },
  {classid:1,subjectName:"English", topicName : "topic2 of English class id 10" },
  {classid:1,subjectName:"English", topicName : "topic3 of English class id 10" },
  {classid:2,subjectName:"hINDI", topicName : "topic1 of hINDI class id 20" },
  {classid:2,subjectName:"HINDI", topicName : "topic2 of hINDI class id 20" },
  {classid:2,subjectName:"HINDI", topicName : "topic3 of HINDI class id 20" },
  {classid:2,subjectName:"English", topicName : "topic1 of English class id 20" },
  {classid:2,subjectName:"English", topicName : "topic2 of English class id 20" },
  {classid:2,subjectName:"English", topicName : "topic3 of English class id 20" },
];
classes = [];
topics = [];
ngOnInit() {
  // find unique class names
  this.classes = this.classesArray.map((obj) => obj.subjectName.toLowerCase());
    this.classes = this.classes.filter((v, i) => this.classes.indexOf(v) === i);
  // default selected subject to hindi
  this.setTopics('hindi');
}
// filter topics by subjectname and generate new topics array
setTopics(subjectName) {
  this.topics = this.classesArray.filter((classes)=> classes.subjectName.toLowerCase() === subjectName.toLowerCase())
}

}

下面是工作演示https://stackblitz.com/edit/santosh-angular-array-filter