0

嗨，我正在开发一个网络应用程序，我在其中显示以 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(",");
 }

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

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

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

4

3 回答 3

1

“它只显示所有 ID 的 ID 3 语言”

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

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

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

那么这只是学生数据的一部分，我假设您正在mat-chip..之外循环，所以您可以*ngFor="let lang of student.LanguageArray在您的内部执行类似的操作*ngFor="let student of students"

于 2022-01-04T20:39:33.703 回答
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>
于 2022-01-04T20:40:54.163 回答
0

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

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>
于 2022-01-04T20:58:33.943 回答