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

Question

我有两个数组。第一个有 classId 和 classNameclasses = [  {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

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

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

let subjects = [];

...

getSubjects(classId){

  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;">

  <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>

组件.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