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

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)">&nbsp;&nbsp; &nbsp; {{ c.classname }}&nbsp;</button>至少在这个例子中，右手表格应该显示给定 classId 的所有选定元素，或者如果它没有元素则隐藏。我会这样做：<table *ngIf="selectedSubjects && selectedSubjects.length > 0" >&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;<th> Subject name </th>&nbsp; &nbsp; &nbsp; &nbsp;<th> Subject name </th>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr *ngFor="let subject of selectedSubjects">&nbsp; &nbsp; &nbsp; &nbsp;<th> {{ subject.subjectName }} </th>&nbsp; &nbsp; &nbsp; &nbsp;<th> {{ subject.topicName }} </th>&nbsp; &nbsp; </tr></table>在控制器（.ts 文件）中，您编写“selectClass”函数，它将过滤 subjectWithTopics 数组，并将其放入我们新创建的数组“selectedSubjects”（您应该在控制器的类中定义）：selectClass(selectedClass){&nbsp; &nbsp;this.selectedSubjects = subjectWithTopics.filter( topic => topic.classId === selectedClass.classid);}这应该够了吧！

Answer 2

您可以将主题存储在变量中并在 html 中呈现该变量。您可以编写一个函数来在单击某个类时获取 Subjects。例如let subjects = [];...getSubjects(classId){&nbsp; this.subjects = this.subjectWithTopics.filter(subject=>subject.classId===classId)}然后在html中的for循环中渲染这个函数。例如<div ngFor="let subject of subjects"></div>

Answer 3

组件.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;">&nbsp; <button style="margin: 0px 5px; color: blue;" (click)="setTopics(classname)">{{classname | uppercase}}&nbsp; </button></div><h3>Topics</h3><div *ngFor="let topic of topics">&nbsp; <div (click)="setTopics(topic)">{{topic.topicName}}&nbsp; </div></div>组件.tsimport { Component, VERSION, OnInit } from '@angular/core';@Component({&nbsp; selector: 'my-app',&nbsp; templateUrl: './app.component.html',&nbsp; styleUrls: [ './app.component.css' ]})export class AppComponent&nbsp; implements OnInit{&nbsp; name = 'Angular ' + VERSION.major;&nbsp; classesArray&nbsp; = [&nbsp; {classid:1,subjectName:"hindi", topicName : "topic1 of hindi class id 10" },&nbsp; {classid:1,subjectName:"hindi", topicName : "topic2 of hindi class id 10" },&nbsp; {classid:1,subjectName:"English", topicName : "topic1 of English class id 10" },&nbsp; {classid:1,subjectName:"English", topicName : "topic2 of English class id 10" },&nbsp; {classid:1,subjectName:"English", topicName : "topic3 of English class id 10" },&nbsp; {classid:2,subjectName:"hINDI", topicName : "topic1 of hINDI class id 20" },&nbsp; {classid:2,subjectName:"HINDI", topicName : "topic2 of hINDI class id 20" },&nbsp; {classid:2,subjectName:"HINDI", topicName : "topic3 of HINDI class id 20" },&nbsp; {classid:2,subjectName:"English", topicName : "topic1 of English class id 20" },&nbsp; {classid:2,subjectName:"English", topicName : "topic2 of English class id 20" },&nbsp; {classid:2,subjectName:"English", topicName : "topic3 of English class id 20" },];classes = [];topics = [];ngOnInit() {&nbsp; // find unique class names&nbsp; this.classes = this.classesArray.map((obj) => obj.subjectName.toLowerCase());&nbsp; &nbsp; this.classes = this.classes.filter((v, i) => this.classes.indexOf(v) === i);&nbsp; // default selected subject to hindi&nbsp; this.setTopics('hindi');}// filter topics by subjectname and generate new topics arraysetTopics(subjectName) {&nbsp; this.topics = this.classesArray.filter((classes)=> classes.subjectName.toLowerCase() === subjectName.toLowerCase())}}这是工作演示https://stackblitz.com/edit/santosh-angular-array-filter