У меня есть массив объектов, я хотел бы объединить строку и массив, отображая их в итерации ngfor.
temp: [
{
"value1": "as",
"value2": "[a, b, c, d, e]",
"value3": "alphabets"
},
{
"value1": "qw",
"value2": "[aa, bb, cc, dd, ee]",
"value3": "alphas"
}
Я хочу показать данные как
Заранее спасибо.
Я попытался объединить строку и массив, но массив выглядит как массив, а не как строка.
Это нужно делать только в файле шаблона. В противном случае мы можем изменить объект для достижения этой цели.
🤔 А знаете ли вы, что...
Фреймворк Angular имеет большое количество сторонних библиотек и расширений для расширения функциональности.
Вы можете создать новый массив, в котором будет храниться преобразованное значение.
Здесь мы используем регулярное выражение /[\[\]]/g, которому соответствуют символы [ и ], и заменяем его пустой строкой, наконец, мы объединяем значения в массиве.
Мы можем использовать @for для создания цикла и создания строк.
Я создаю новый массив, потому что другое мое решение включает преобразование с использованием функции, которая запускается каждый раз во время обнаружения изменений, поэтому этот метод, представленный ниже, лучше подходит для производительности.
import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
@Component({
selector: 'app-root',
standalone: true,
template: `
<table style = "width:100%">
<tr>
<th>Column A</th>
<th>Column B</th>
</tr>
@for(item of tempTransformed;track $index) {
<tr>
<td>{{item.value1}}</td>
<td>{{item.value3}}, {{item.value2}}</td>
</tr>
}
</table>
`,
})
export class App {
temp: Array<any> = [
{
value1: 'as',
value2: '[a, b, c, d, e]',
value3: 'alphabets',
},
{
value1: 'qw',
value2: '[aa, bb, cc, dd, ee]',
value3: 'alphas',
}
];
tempTransformed: Array<any> = [];
ngOnInit() {
this.tempTransformed = this.temp.map((item: any) => {
item.value2 = item.value2.replaceAll(/[\[\]]/g, '');
return item;
});
}
}
bootstrapApplication(App);
Тот же код, но с *ngFor