Question

我使用ngFor生成了我创建的数据，我希望模态表单中的数据针对每个元素进行更改，但是当我单击任何元素时，只有页面中第一个元素的数据出现了，我该如何更改它这是我的代码：

                    <form target="_blank" novalidate="true" action="https://spondonit.us12.list-manage.com/subscribe/post?u=1462626880ade1ac87bd9c93a&amp;id=92a4423d01" method="get" class="form-inline">
        
                    <div class="d-flex flex-row">
                        <div class="modal fade" id="exampleModal3" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel3" aria-hidden="true">
                            <div class="modal-dialog" role="document">
                               
                              <div class="modal-content">
                                
                                <div class="modal-header">
                                  <h5 class="modal-title" id="exampleModalLabel3">Unit Details</h5>
                                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                  </button>
                                </div>
                                <div class="col-lg-12">
                                    <br>
                                    <p>Project : {{prop.project}} <br>
                                        Unit Name : {{prop.unit_name}} <br>
                                       Unit Usage :  {{prop.unit_usage}} <br>
                                       Country : {{prop.country}} <br>
                                       Unit for : {{prop.unit_for}} <br>
                                       Finishing : {{prop.finishing}} <br>
                                       Property type : {{prop.property_type}} <br>
                                       City : {{prop.city}} <br>
                                       District: {{prop.district}} <br>
                                       Min. Area: {{prop.min_area}} <br>
                                       Starting Price: {{prop.starting_price}}<br> <br>
                                       <img style="height: 150px; width: 250px;" src= {{prop.img}}>
                                         </p>
                                      
                                        <div class="alert-msg">
                                        </div>
                                    </form>
                                </div>
              
                              </div>
                            </div>
                          </div>
                        </div>
                            <div style="position: absolute; left: -5000px;">
                                <input name="b_36c4fd991d266f23781ded980_aefe40901a" tabindex="-1" value="" type="text">
                            </div>
                    </div>      
                    <div class="info"></div>
                    </form>
            </div>
                <div class="images">
                    <img style="height: 250px; width: 350px;" class="content-image img-fluid d-block mx-auto" src= {{prop.img}} alt="" data-toggle="modal" data-target="#exampleModal3">
                    <span style="margin-top: 0px; color:black;background-color: rgba(255,255,255,0.3);"><br>{{prop.property_type}} <br><br><br> {{prop.developer}} <br><br><br> {{prop.district}} <br></span>
                </div>
            </div>
        </div>

Answer 1

有一个没有开头标签的标签

       <div class="alert-msg">
                                </div>
                            </form>   <----Remove this
                        </div>

此处的属性列表应更改为您选择的列表名称。

<div class="col-lg-12" *ngFor="let prop of properties">

角度填充模态形式

1 个答案: