Hola, estoy desarrollando una aplicación web en la que muestro los datos de un estudiante recibidos en formato json.
Aquí está el fragmento de código mecanografiado
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(","); } }Traté de hacer Idiomas como una matriz separada y pensé en usarlo mientras se mostraba en la pantalla usando ngFor
languages : string[] = []; for (let i=0; i <= STUDENT_DATA.length - 1 ; i++) { this.languages = STUDENT_DATA[i].Languages.split(","); }Traté de mostrar en mat-chip-list como se muestra a continuación, pero solo muestra ID 3 idiomas para todas las ID
<mat-chip-list> <mat-chip *ngFor = "let lang of languages> {{lang}} </mat-chip> </mat-chip-list>Necesita ayuda para leer el valor json de los idiomas y mostrarlo en la pantalla.
"simplemente muestra ID 3 idiomas para todas las ID"
esto se debe a que está configurando this.language en el primero, luego en el segundo ... al final, simplemente termina siendo el último elemento. No tienes uno separado para cada estudiante.
Creo que una mejor alternativa sería agregar una propiedad en cada objeto de estudiante. Algo como:
this.students = STUDENT_DATA.map(s => { ...s, LanguageArray: s.Language.split(",").map(l => l.trim()) }); entonces esto sería solo parte de los datos de los estudiantes que supongo que está recorriendo fuera del mat-chip ... por lo que podría hacer algo como *ngFor="let lang of student.LanguageArray dentro de su *ngFor="let student of students"
Si solo desea recorrer la cadena de idiomas para cada estudiante en el ciclo, puede hacer su split() en línea con un segundo ngFor, como en
<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>Su código actualmente sobrescribe la variable de idioma durante cada iteración. Modifique el tipo de idiomas y agregue índice también a la variable de idiomas:
let languages: string[][] = []; for (let i = 0; i <= STUDENT_DATA.length - 1; i++) { languages[i] = STUDENT_DATA[i].Languages.split(","); }El código debería ser algo así:
<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>