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

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 根据类数组显示按钮。点击这些按钮中的任何一个，屏幕右侧将显示该班级的主题，点击该班级的每个主题的主题。

我在想的是我将捕获类按钮的 classid，然后根据该 id 对 subjectWithTopics 数组进行排序，但不知道接下来会发生什么。

如果有人可以请帮忙。

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

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

Answer 3

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

您可以编写一个函数来在单击某个类时获取主题。 例如

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

然后在html中的for循环中渲染这个函数。 例如

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