Javascript 在多个元素上使用*ngFor的问题

我希望以一种模式显示数组中的项目，该模式在表中单击按钮后显示

按钮的HTML格式：

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

模式的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>

{{item.location}
&时代；

非剪切材料模型
{{item.wtNumber}

以下是我的数据模型组件：

    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> = [];
}

客户：字符串；
地址：字符串；
已执行的工作：字符串；
分配给：字符串；
状态码：字符串；
步骤：数组

我在页面上有另一个模式，它使用了一个
*ngFor
语句来显示它应该正确显示的信息，但我不确定它是否影响了这个模式

我对Angular不太熟悉，所以我不确定自己是否做得不对

非常感谢您的帮助，并提前向您表示感谢

我在div中放入的带有*ngFor语句的任何代码都不会显示在模式中

localation
和
wtNumber
都不会出现在数据模型中

如果将其移动到父容器，则会出现一个单独的错误：

此错误很可能与用于显示模态的方法有关

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

但是，这不是以角度显示模态的标准方式。通常，这是通过*ngIf绑定完成的

TS

HTML


tabindex=“-1”
role=“dialog”
aria labelledby=“mySmallModalLabel”
aria hidden=“true”
onload=“loadUnshippedMaterial（项目编号）”
看起来问题已经解决了。我们添加了
unshippedItems:Array=['loading']编码到数据模型中，以便在尝试循环之前数组中始终存在某些内容。现在，单击按钮时，将显示正确的信息

谢谢大家的帮助和回应
 你能分享StatusPageComponent的全部代码（TS、HTML）吗？如果它与你的问题相关，它需要在这里，而不是在Google Drive上。至于你的问题，我看不出你试图链接的是什么错误，但看看你的代码，
item
在ngFor之外访问时是未定义的，你正在使用
{{item.wtNumber}}
（它也不是你的类中的道具！）。你也没有
位置
作为你班上的道具。如果我必须大胆尝试一下，你可能在你的模式中看不到任何东西，因为你正在对它进行迭代，并显示不存在的值（
location
）。@Rich对此表示歉意，我无法上传图像，因为我需要10个声誉才能上传。也许这个链接有用？我将发布生成上述代码时代码外观的代码片段error@robert我无法将整个代码库发布到网上，因为它有敏感数据，但这里是大部分的TS和HTML。谢谢你的回答，我已经改变了显示模式的方式，但仍然没有任何信息
wtNumber
和
location
都来自
this.sageApi.pullReport（unshippedraddon）.subscribe
函数中的
loadUnshippedMaterial
函数调用。我错误地将
项目。
放在
wtNumber
前面，但后来将其删除。如果我将一个
作为我的模式的父项，那么当我单击该按钮时，我将完全看不到模式显示。
unshippedMaterialModalShow() {
  const modalContainer: any = document.getElementById('self-built-modal');
  modalContainer.style.display='block'; // 'style' here is causing the error
}

unshippedMaterialModalShow() {
  this.showModal = true;
}

<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)"
>