在 div 之后获取不需要的逗号

Question

`

这是用 TypeScript 编写的代码。

这是构建 HTML table 的代码，它显示嵌套对象中的项目。这段代码工作正常，但只是在打印时存在问题，它应该只创建 table 行，但它也会打印一些昏迷，这些昏迷甚至不属于执行的任何行的一部分

import {Component} from '@angular/core';
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'Angular';
  data = {
    id: '0001',
    type: 'donut',
    name: 'Cake',
    ppu: 0.55,
    batters: {
      batter: [{
          id: '1001',
          type: 'Regular'
        },
        {
          id: '1002',
          type: 'Chocolate'
        },
        {
          id: '1003',
          type: 'Blueberry'
        },
        {
          id: '1004',
          type: "Devil's Food"
        }
      ]
    },
    topping: [{
        id: '5001',
        type: 'None'
      },
      {
        id: '5002',
        type: 'Glazed'
      },
      {
        id: '5005',
        type: 'Sugar'
      },
      {
        id: '5007',
        type: 'Powdered Sugar'
      },
      {
        id: '5006',
        type: 'Chocolate with Sprinkles'
      },
      {
        id: '5003',
        type: 'Chocolate'
      },
      {
        id: '5004',
        type: 'Maple'
      }
    ]
  };

  //Function which build HTML Table which get's dynamic values.

  htmlStr = (data, wrapperClassName, tableClassName = 'table table-sm') => {
    return `
    <div class=${tableClassName}>
      <table className=${tableClassName}>

        <tbody>

          ${Object.keys(data).map( (k) => `
          <tr>
            ${(!Array.isArray(data) && `
            <td>${k.replace(/_/g, ' ')}</td>`) || ''} ${ data[k] && typeof data[k] === 'object' ? `
            <td>
              ${this.htmlStr(data[k], wrapperClassName, tableClassName)}
            </td>` : `
            <td>
              <span>${data[k] || ''}</span>
            </td>` }
          </tr>` )}
        </tbody>

      </table>

    </div>`;
  };
}

Answer 1

在您的代码中，片段 Object.keys(data).map(.....) 将其转换为数组。现在，当您将此数组放入字符串文字中时，JavaScript 将尝试将其转换为字符串，因此它将调用 .toString()，默认情况下使用 , 连接数组的所有元素。

而不是这样做Object.keys(data).map(....).join("")这将用空字符串加入数组

在 div 之后获取不需要的逗号

Getting unwanted commas after div

html

javascript

html-table

typescript

angular