`
這是用 TypeScript 撰寫的代碼。
這是構建 HTML 表格的代碼，該表格顯示來自嵌套物件的專案。這段代碼作業正常，但在列印中存在一個問題，就像它應該只創建帶有行的表，但它也在列印一些甚至不屬于執行的任何行的逗號
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>`;
};
}
uj5u.com熱心網友回復：
在您的代碼中，代碼段Object.keys(data).map(.....)將其轉換為陣列。現在，當您將此陣列放入字串字面量中時，JavaScript 將嘗試將其轉換為字串，因此它將呼叫它，默認情況下.toString()連接陣列的所有元素。,
而是這樣做，Object.keys(data).map(....).join("")這將使用空字串連接陣列
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/450142.html
標籤：javascript html 有角度的 打字稿 html表
上一篇：Angular-型別'(c:FormControl)=>ValidationError|null'不可分配給型別'ValidatorFn'