Início / coding / Perguntas / 78926694
Accepted
Naeem Akhtar
Asked: 2024-08-29 15:48:25 +0800 CST

Como combinar string e array na interpolação de string de ngfor em Angular

  • 772

Tenho uma matriz de objetos e gostaria de combinar uma string e uma matriz enquanto os exibimos na iteração do ngfor.

temp: [
  {
    "value1": "as",
    "value2": "[a, b, c, d, e]",
    "value3": "alphabets"
  },
  {
    "value1": "qw",
    "value2": "[aa, bb, cc, dd, ee]",
    "value3": "alphas"
  }

Quero mostrar dados como

Coluna A Coluna B
como alfabetos, a, b, c, de
pergunta alfas, aa, bb, cc, dd, ee

Agradeço antecipadamente.

Tentei concatenar a string e o array, mas o array está aparecendo como array, não como string.

Tem que fazer isso somente no arquivo de modelo. Caso contrário, podemos alterar o objeto para conseguir isso.

angular

1 respostas

  1. Best Answer

    Você pode criar uma nova matriz que armazena o valor transformado.

    Aqui usamos a expressão regular /[\[\]]/gque corresponde aos caracteres [e ]a substitui por uma string vazia. Por fim, juntamos os valores na matriz.

    Podemos usar @foro loop e criar as linhas.

    Estou criando uma nova matriz porque minha outra solução envolve transformação usando uma função, que é executada sempre durante a detecção de alterações, então o método abaixo é melhor para desempenho.

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

    Demonstração do Stackblitz

    Mesmo código mas com*ngFor

    Demonstração do Stackblitz

    • 1

relate perguntas