在 Angular 9 的打字稿文件中使用 *ngFor
在打字稿中使用 *ngfor 而不是在 html 文件中
async printString(orderObject) {
let html = '';
return orderObject.reduce(async (lastPromise: any, order: any, j: any) => {
lastPromise;
var date = order.timeStamp.seconds*1000;
var orderDate = this.datePipe.transform(date, 'MM/dd/yyyy , h:mm a');
html = html +
`
<table>
<tr style="border: 0px">
<td>
<div> <img style ="height: 80px;width: 80px;" src= 'assets/icon/shivam64.png'> </div>
</td>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></td><td></td>
<td>
</td>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></td><td></td>
<td>
<STRONG> Client Information </STRONG>
<div><STRONG>Mobile : </STRONG> +919826598620 </div>
<div><STRONG>Date : </STRONG> ${orderDate} </div>
</td>
</tr>
</table>
<br/>
<table>
<tr style="border: 0px">
<td>
<STRONG> Client Information </STRONG>
<div> ${this.customerData.name} </div>
<div> ${this.customerData.address} </div>
</td>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></td><td></td>
<td>
</td>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></td><td></td>
<td>
<STRONG> Order Details </STRONG>
<div><STRONG>Order Id : </STRONG>${order.orderId}</div>
<div><STRONG>Delivered By : </STRONG>${order.creatorName}</div>
<div><STRONG>Collected By : </STRONG>
<span *ngIf="gasData.collectedBy">
${order.collectedBy.name} -
(${order.collectedBy.contact})
</span>
</div>
</td>
</tr>
</table>
<br/>
<br/>
<table>
<tr>
<th>S.No</th>
<th>Description of Gas</th>
<th>Size</th>
<th>Total Collected</th>
<th>Total Delivered</th>
<th>Total Volume</th>
</tr>
<tr>
<td>
<ul style="list-style: none;padding: inherit;">
<li style="margin: 5px auto;" *ngFor="let orderData of order.totalDelivered; let last = last;">
${j+1}
</li>
</ul>
</td>
<td>
<ul style="list-style: none;padding: inherit;">
<li style="margin: 5px auto;" *ngFor="let orderData of order.totalDelivered;">
<span [ngStyle]="{color: ${this.getColor(this.gasData.type)}}">
{{orderData.type}}
</span>
</li>
</ul>
</td>
</tr>
</table>
`
return await html;
}, Promise.resolve());
}
美好的一天，我只是想知道是否可以在打字稿中执行 ngFor 的逻辑？我想循环打字稿中的数据，就像 ngFor 在 HTML 中所做的那样。希望您能够帮助我。先感谢您。
如果我理解你的问题。您可以使用
foreach函数或for of关键字。例子：