在多個元素上使用* ngFor的問題

Question

我想在一個模式中顯示數組中的項目，該模式在表格中單擊按鈕后顯示。

按鈕的HTML：

<td class="col-xs-1 ">
  <button (click)="unshippedMaterialModalShow()">Show</button>
</td>

按鈕的TS：

  unshippedMaterialModalShow() {
    const modalContainer: any = document.getElementById('self-built-modal');
    modalContainer.style.display='block';
}

模態的HTML：

<div
 id="self-built-modal"
 tabindex="-1"
 role="dialog"
 aria-labelledby="mySmallModalLabel"
 aria-hidden="true"
 onload="loadUnshippedMaterial(item.wtNumber)"
 >
 <div *ngFor="let item of dataModel.unshippedItems; let i = index">{{item.location}}</div>
 <div id="overlay"></div>
 <div id="modal-contents">
   <div id="modal-header">

      <button
        id="unshipped-modal-close"
        type="button"
        (click)="unshippedMaterialModalHide()"
        aria-label="Close"
      >
        <span aria-hidden="true">&times;</span>
      </button>
      <hr>
      Unshipped Material Modal
       {{item.wtNumber}}
    </div>
  </div>
</div>

這是我的DataModel組件：

    customer: string;
    address: string;
    workPerformed: string;
    assignedTo: string;
    statusCode: string;
    steps: Array<any> = [];
    wts: Array<any> = [];
    subdivisions: Array<any> = [];
    orders: Array<any> = [];
    ordersLM: Array<any> = [];
    tracking: string;
    loaded: Array<any> = [];
    loadtech: Array<any> = [];
    salesorder: string;
    statusCodes: string;
    techid: string;
    statuscomment: string;
    newtracking: string;
    finaltracking: string;
    leadmanReport: Array<any> = [];
    redFlag: string;
    miscTech: Array<any> = [];
    unshippedItems: Array<any> = [];
}

我在div使用*ngFor語句放入的任何代碼都不會顯示在模態上。 如果我將其移動為父容器，那么我會收到一個單獨的錯誤： https ： //drive.google.com/file/d/1OvbX7Z8rbsy0Brdk1ey_SYNmbluO-ghl/view？usp =sharing

我在頁面上有另一個模式，它使用*ngFor語句顯示它應該正確的信息，但我不確定它是否影響了這個模態。

我對Angular並不熟悉所以我不確定我是否做錯了。

非常感謝任何幫助，並提前感謝您！

Answer 1

我在div中使用* ngFor語句放入的任何代碼都不會顯示在模態上。

無論localtion和wtNumber不會出現在你的數據模型。

如果我將它移動為父容器，那么我會收到一個單獨的錯誤：

此錯誤很可能與您用於顯示模態的方法有關。

unshippedMaterialModalShow() {
  const modalContainer: any = document.getElementById('self-built-modal');
  modalContainer.style.display='block'; // 'style' here is causing the error
}

但是，這不是在Angular中顯示模態的標准方法。 通常，這是通過* ngIf綁定完成的。

TS

unshippedMaterialModalShow() {
  this.showModal = true;
}

HTML

<div
  id="self-built-modal"
  *ngIf="showModal" <!-- toggle 'showModal' variable to show/hide -->
  tabindex="-1"
  role="dialog"
  aria-labelledby="mySmallModalLabel"
  aria-hidden="true"
  onload="loadUnshippedMaterial(item.wtNumber)"
>

Answer 2

看起來問題已修復。 我們添加了unshippedItems: Array<any> = ['loading']; 到數據模型，以便在嘗試循環之前，數組中始終存在某些內容。 現在，當單擊按鈕時，將顯示正確的信息。

謝謝大家的幫助和回復！