Angular 以模式显示标题数据值（以表格形式显示）的相应项目数据值

我正在开发一个angular应用程序，在该应用程序中，我从服务器接收数据，在该服务器中，我只将标题数据放在表中，对于Coresponding标题数据，我在表中创建了一个按钮，当用户单击该按钮时，相应的项目数据需要显示在Boostrap模式中

这里我面临一个问题，在模式中，我只接收所有对应行的第一个数据

我的appcomponent.html文件

<table class="table"  > 
    <thead class="table-info"> 
        <tr> 
            <th>Customer Number</th>
            <th>Sales Doc Number</th>  
            <th>Date</th>
            <th>Name of Person </th>      
        </tr>
    </thead>
        <tr *ngFor="let val of user | paginate: { itemsPerPage: 5, currentPage: p }; let i = index" class="shaded">
            <td>{{val.KUNNR}}</td>
            <td>{{val.VBELN}}</td> 
            <td>{{val.ERDAT}}</td> 
            <td>{{val.ERNAM}}</td>
            <td>
                <button  class="btn btn-primary" data-toggle="modal" data-target="#myModal" > <i class="fas fa-info-circle fa-sm fa-fw mr-2 text-white-400"></i></button>
                <div class="modal fade" id="myModal" role="dialog">
                    <div class="modal-dialog">
                        <!-- Modal content-->
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                                <h4 class="modal-title"> Customer Inquiry </h4>
                               </div>
                               <div class="modal-body">
                                  <td>Material Number: {{val.MATNR}}</td>
                                  <br/>
                                   <td>Material Date: {{val.MATWA}}</td>
                                   <br/>
                                   <td>Net Value in Document Currency: {{val.NETWR}}</td>
                                   <br/>
                                   <td>Short Text: {{val.ARKTX}}</td>
                               </div>
                               <div class="modal-footer">
                                   <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                               </div>
                           </div>
                       </div>
                   </div>
            </td>         
        </tr>

我有4个数据数组，前4个字段KUNNR、VBELN、ERDAT、ERNAM需要与按钮一起显示在表中。然后单击其余3个字段的按钮，MATNR、MATWA、NETWR、ARKTX需要在相应行的模式中显示。我用一个按钮完美地显示了数据，但点击按钮后，我只得到数组的第一项数据，点击按钮后，所有行中都会填充数据。

---

但在我的代码中，我得到了正确显示的标题表，但单击一个按钮，我只得到所有行的第一项数据。如何解决此问题？据我所知，您希望在引导模式中显示数组的所有行/项，是否有人可以帮助我。 遵循以下步骤：

• 从表/数组中删除模态节

• 在这里为modal和embed*ngfor数组创建一个单独的部分
  客户编号 销售单据号 日期 人名 {{val.KUNNR}} {{val.VBELN}} {{val.ERDAT} {{val.ERNAM}

  
  &时代；
  客户查询
  物料编号：{val.MATNR}
  
  
  材料日期：{val.MATWA}
  
  
  以文档货币表示的净值：{{val.NETWR}
  
  
  短文本：{val.ARKTX}
  接近
  

---

据我所知，您希望在引导模式中显示数组的所有行/项。 遵循以下步骤：

• 从表/数组中删除模态节

• 在这里为modal和embed*ngfor数组创建一个单独的部分
  客户编号 销售单据号 日期 人名 {{val.KUNNR}} {{val.VBELN}} {{val.ERDAT} {{val.ERNAM}

  
  &时代；
  客户查询
  物料编号：{val.MATNR}
  
  
  材料日期：{val.MATWA}
  
  
  以文档货币表示的净值：{{val.NETWR}
  
  
  短文本：{val.ARKTX}
  接近
  

---

它显示模式中的所有项目详细信息。但是我希望modal wrt中对应的条目数据与它们的标题数据一致。例如，单击表的第一行上的按钮时需要0个数组项数据，类似地，单击标题表的第一行时需要模态中的第一个数组项数据。谢谢你的代码。我试过这么做，但我做不到。你能帮我找出我要去哪里吗？在点击方法中分配单个项目的值，并在模式中使用它。i、 e使用单一项目；变量，将值赋给singleItem（单击）=“singleItem=item”，并使用此singleItem而不是嵌入整个数组。它将在模式中显示所有项目的详细信息。但是我希望modal wrt中对应的条目数据与它们的标题数据一致。例如，单击表的第一行上的按钮时需要0个数组项数据，类似地，单击标题表的第一行时需要模态中的第一个数组项数据。谢谢你的代码。我试过这么做，但我做不到。你能帮我找出我要去哪里吗？在点击方法中分配单个项目的值，并在模式中使用它。i、 e使用单一项目；变量，将值赋给singleItem（单击）=“singleItem=item”，并使用此singleItem而不是嵌入整个数组。

0:
KUNNR: ["0000100000"]
VBELN: ["0010000023"]
ERDAT: ["2015-07-02"]
ERNAM: ["MM_DEMO_BS"]
MATNR: ["F126"]
MATWA: ["F126"]
NETWR: ["1200.00"]
ARKTX: ["coco palm chips"]

1:
KUNNR: ["0000100000"]
VBELN: ["0010000024"]
ERDAT: ["2015-07-02"]
ERNAM: ["MM_DEMO_BS"]
MATNR: ["F125"]
MATWA: ["F125"]
NETWR: ["1200.00"]
ARKTX: ["coconut chips"]

2:
KUNNR: ["0000100000"]
VBELN: ["0010000025"]
ERDAT: ["2015-07-02"]
ERNAM: ["MM_DEMO_BS"]
MATNR: ["F125"]
MATWA: ["F125"]
NETWR: ["1200.00"]
ARKTX: ["coco coconut chips"]

3:
KUNNR: ["0000100000"]
VBELN: ["0010000022"]
ERDAT: ["2015-07-02"]
ERNAM: ["MM_DEMO_BS"]
MATNR: ["F125"]
MATWA: ["F125"]
NETWR: ["1200.00"]
ARKTX: ["coco palm coconut chips"]

         <div class="modal fade" id="myModal" role="dialog">
             <div class="modal-dialog">
                 <!-- Modal content-->
                 <div class="modal-content">
                     <div class="modal-header">
                         <button type="button" class="close" data-dismiss="modal">&times;</button>
                         <h4 class="modal-title"> Customer Inquiry </h4>
                        </div>
                        <div class="modal-body" *ngFor="let val of user | paginate: { itemsPerPage: 5, currentPage: p }; let i = index">
                           <td>Material Number: {{val.MATNR}}</td>
                           <br/>
                            <td>Material Date: {{val.MATWA}}</td>
                            <br/>
                            <td>Net Value in Document Currency: {{val.NETWR}}</td>
                            <br/>
                            <td>Short Text: {{val.ARKTX}}</td>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>