Как объединить строку и массив в строковой интерполяции ngfor в 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);

Демо-версия Stackblitz

Тот же код, но с *ngFor

Демо-версия Stackblitz