主页 / coding / 问题 / 78926694
Accepted
Naeem Akhtar
Asked: 2024-08-29 15:48:25 +0800 CST

如何在 Angular 中的 ngfor 字符串插值中组合字符串和数组

  • 772

我有一个对象数组，我想在 ngfor 迭代中显示时组合一个字符串和一个数组。

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

我想显示数据为

A 列 B 列
作为 字母，a，b，c，de
韓 阿尔法、aa、bb、cc、dd、ee

先感谢您。

我尝试连接字符串和数组，但数组显示为数组而不是字符串。

只需在模板文件中执行此操作。否则，我们可以修改对象来实现这一点。

angular

1 个回答

  1. Best Answer

    您可以创建一个新数组来存储转换后的值。

    这里我们使用正则表达式/[\[\]]/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 演示

    • 1

相关问题