亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

使用兩個不同的數組創建視圖

使用兩個不同的數組創建視圖

MM們 2022-12-02 10:48:58
我有兩個數組。第一個有 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 數組進行排序，但不知道接下來會發生什么。如果有人可以請幫助。
查看完整描述

3 回答

?
繁星淼淼

TA貢獻1775條經驗 獲得超11個贊

為此，您可以調用一種方法來過濾（或排序，無論您喜歡什么）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);

}

這應該夠了吧！


查看完整回答
反對 回復 2022-12-02
?
心有法竹

TA貢獻1866條經驗 獲得超5個贊

您可以將主題存儲在變量中并在 html 中呈現該變量。


您可以編寫一個函數來在單擊某個類時獲取 Subjects。例如


let subjects = [];

...

getSubjects(classId){

  this.subjects = this.subjectWithTopics.filter(subject=>subject.classId===classId)

}

然后在html中的for循環中渲染這個函數。例如


<div ngFor="let subject of subjects">

</div>


查看完整回答
反對 回復 2022-12-02
?
慕森卡

TA貢獻1806條經驗 獲得超8個贊

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


查看完整回答
反對 回復 2022-12-02
  • 3 回答
  • 0 關注
  • 117 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號