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

Question

您好，我正在开发一个网络应用程序，我在其中显示以 json 格式接收的学生数据。

这是打字稿代码sn-p

    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(",");
 }

我尝试在 mat-chip-list 中显示如下所示，但它只显示所有 ID 的 ID 3 语言

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

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

Answer 1

如果您只是想遍历循环中每个学生的语言字符串，您可以将 split() 与第二个 ngFor 内联，如

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