代码之家  ›  专栏  ›  技术社区  ›  Muhammad Moosa Zubairy

在div之后得到不需要的逗号

  •  1
  • Muhammad Moosa Zubairy  · 技术社区  · 3 年前

    `

    这是用TypeScript编写的代码。

    这是构建HTML表的代码,该表显示嵌套对象中的项。这段代码运行得很好,但在打印时存在一个问题,比如它应该只创建包含行的表,但它也打印一些coma,这些coma甚至不属于执行的任何行的一部分

    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>`;
      };
    }
    
    1 回复  |  直到 3 年前
        1
  •  0
  •   N.K.    3 年前

    在你的代码中 Object.keys(data).map(.....) 将其转换为数组。现在,当你将这个数组放入字符串文字中时,JavaScript会尝试将其转换为字符串,以便调用 .toString() 它使用 , 默认情况下。

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