在 Angular 9 的打字稿文件中使用 *ngFor

Question

在 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 中所做的那样。希望您能够帮助我。提前谢谢你。

Answer 1

如果我理解你的问题。您可以使用foreach 函数或for of 关键字。

例子：

const array = [3, 4, 5, 6];

array.forEach(elem => {
  console.log(elem);
});

for (let elem of array) {
  console.log(elem);
}

Answer 2

你不能那样做。 Angular 编译模板 + ts 文件并生成纯 html 和 javascript。您必须将 html 放在单独的文件中，并从 ts 文件中与之交互。