读取带有子数组值的json，并使用ngFor在html上显示

Question

嗨，我正在开发一个web应用程序，在这里我将显示以json格式接收的学生数据。

以下是打字脚本代码片段

export interface studentData{
ID : number;
Name :string;
Class : string;
Languages: string;
}

const STUDENT_DATA: studentData[] = 
[
{
ID : 1
Name: "Amy",
Class: "Grade1",
Languages: "Java, .net, Python"
},
{
ID : 2
Name: "John",
Class: "Grade2",
Languages: "Kotlin, Java, Typescript"
},
{
ID: 3
Name: "Shawn",
Class: "Grade3",
Languages: "Javascript, C++, Perl"
},
]
export class StudentDataComponent{
languages : string[] = [];
for (let i=0; i <= STUDENT_DATA.length - 1 ; i++)
{
this.languages = STUDENT_DATA[i].Languages.split(",");
}
}

我尝试将Languages作为单独的数组，并考虑在使用ngFor 在屏幕上显示时使用它

languages : string[] = [];
for (let i=0; i <= STUDENT_DATA.length - 1 ; i++)
{
this.languages = STUDENT_DATA[i].Languages.split(",");
}

我试着在下面的芯片列表中显示，但它只显示所有ID的的ID 3语言

<mat-chip-list>
<mat-chip *ngFor = "let lang of languages>
{{lang}}
</mat-chip>
</mat-chip-list>

需要帮助读取语言json值并在屏幕上显示。

Answer 1

如果你只是想循环遍历循环中每个学生的语言字符串，你可以用第二个ngFor内联split()，就像在中一样

<div *ngFor="let student of STUDENT_DATA">
<!-- .... -->
<mat-chip-list>
<mat-chip *ngFor="let lang of student.languages.split(',')">
{{lang}}
</mat-chip>
</mat-chip-list>
</div>

Answer 2

"它只显示所有ID的ID 3语言"；

这是因为您将this.language设置为第一个，然后是第二个。。。最后，它只是最后一个项目。你没有为每个学生单独设置一个。

我认为更好的选择是在每个学生对象上添加一个属性。类似于：

this.students = STUDENT_DATA.map(s => {
...s,
LanguageArray: s.Language.split(",").map(l => l.trim())
});

那么这只是学生数据的一部分，我假设你正在mat-chip之外循环。。所以你可以在你的*ngFor="let student of students"中做一些类似*ngFor="let lang of student.LanguageArray的事情

Answer 3

您的代码当前在每次迭代期间都会覆盖语言变量。修改语言类型并将索引添加到语言变量：

let languages: string[][] = [];
for (let i = 0; i <= STUDENT_DATA.length - 1; i++) {
languages[i] = STUDENT_DATA[i].Languages.split(",");
}

代码应该是这样的：

<student-element *ngFor="let student of STUDENT_DATA; index as i">
// Element code here
<mat-chip-list>
<mat-chip *ngFor = "let lang of languages[i]">
{{lang}}
</mat-chip>
</mat-chip-list>
</student-element>