Question

我有一个问题，我一直在寻找一段时间，似乎无法解决这个问题。我有一个应用程序，我已经创建了可重用的控件，简单的事实，我希望能够在一个地方编辑它们。

我创建了一个类似于：

的模态控件

<button #btn style="display: none;" hidden="hidden" class="btn btn-info btn-

lg"  data-backdrop="static" data-toggle="modal" data-target="#myModal">Open Modal</button>
<div #myModal class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog modal-lg">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" (click)="close()" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">{{title}}</h4>
            </div>
            <div class="modal-body">
                <ng-content></ng-content>
            </div>
            <div class="modal-footer">
                <button type="button" (click)="close()" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>

和一个类似于：

的搜索控件

<div class="search-and-select">
    <label>{{label}}</label>
    <div class="search-and-select-container">
        <div class="textbox">{{displayValue}}</div>
        <button (click)="openModal()"><span><i class="fa fa-search-plus"></i></span></button>
    </div>
</div>
<modal [(isOpen)]="isModalOpen"
       [title]="modalTitle">
    <div class="row">
        <div class="col-md-4">
            <dropdown label="Column" displayMemberPath="header" [itemsSource]="columns" valueMemberPath="header" [(ngModel)]="searchColumn"></dropdown>
        </div>
        <div class="col-md-4">
            <textbox label="Search" [(ngModel)]="searchText"></textbox>
        </div>
        <div class="col-md-3">
            <button (click)="onSearch()" class="btn btn-primary" style="margin-top: 15px;"> Search</button>
            <button (click)="onClearSearch()" class="btn btn-primary" style="margin-top: 15px;"> Clear</button>
        </div>
    </div>
    <div class="row search-and-select-table-container">
        <table class="table table-responsive" style="max-height: 500px; overflow-y: scroll;">
            <thead>

            <tr>
                <th class="button-column"></th>
                <th *ngFor="let column of columns">{{column.header}}</th>
            </tr>
            </thead>

            <tbody>
            <tr *ngFor="let row of rows">

                <td class="button-column"><button (click)="onSelectedRow(row)" class="btn btn-primary"><span><i class="fa" [ngClass]="{'fa-square-o': !row.$isChecked,'fa-check-square-o': row.$isChecked}"></i></span></button></td>
                <td *ngFor="let column of columns">
                    {{getValue(row,column)}}
                </td>

            </tr>
            </tbody>
        </table>
    </div>
</modal>

如果页面上只有这些控件中的一个，则此方法有效，但如果我添加多个控件，则会打开第一个控件模式而不是正确的控件。有没有我可以确保我打开正确的模态？

Answer 1

此方案需要两个强制性的东西

您应该提供具有不同名称的[(isOpen)]="isModalOpen"属性
您应该为show/hide精确的模型对话框提供不同的模型名称package com.j.caradvisor; import android.content.Intent; import android.net.Uri; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.view.View; import android.widget.TextView; import com.j.models.Car; public class Result extends AppCompatActivity { int i=0; int doors; String make; String model; String layout; String trunk; String gearbox; int price; int expeople; Car test_car = new Car(1, "testmake", "testmodel", "test_layuot", "testtrunk", "testgearbox", 1, 1); String final_car=make+""+model; TextView resultt; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_result); resultt = (TextView) findViewById(R.id.result); test_car = getIntent().getParcelableExtra("test_car"); doors = test_car.getDoors(); make = test_car.getMake(); model = test_car.getModel(); trunk = test_car.getTrunk(); gearbox = test_car.getGearbox(); price = test_car.getPrice(); expeople = test_car.getExpeople(); this.getPackageName(); //resultt.setText(final_car); } public void data(View view) { Car[] car; car = new Car[12]; car[0] = new Car(4, "Volkswagen", "Passat", "4 door saloon", "Spacious", "Both", 25000, 5); car[1] = new Car(2, "Mazda", "MX-5", "Roadster", "Small", "Both", 20000, 2); car[2] = new Car(2, "BMW", "2 series", "2 door coupe", "Spacious", "Both", 20000, 4); car[3] = new Car(3, "Volkswagen", "Golf", "3 door hatchback", "Spacious", "Both", 20000, 4); car[4] = new Car(5, "Peugeot", "308", "5 door hatchback", "Spacious", "Both", 20000, 5); car[5] = new Car(5, "Peugeot","508","Estate", "Spacious", "Both", 25000, 5); car[6] = new Car(5, "Ford", "S-Max", "Minivan", "Spacious", "Both", 28000,7); car[7] = new Car(5, "Ford", "Transit", "Van", "Spacious", "Manual", 20000, 9); car[8] = new Car(3, "Jeep", "Wrangler", "3 door SUV", "Spacious", "Automatic", 40000, 4); car[9] = new Car(5, "KIA", "Sportage", "5 door SUV", "Spacious", "Both", 25000, 5); car[10] = new Car(4, "Audi", "A7", "4 door coupe", "Spacious", "Both", 60000, 4); car[11] = new Car(5, "Peugeot", "208", "5 door hatchback", "Small", "Both", 14000, 5); for (Car aCar : car) { if ((test_car.getDoors() == aCar.getDoors()) && (test_car.getLayout().equals(aCar.getLayout())) && (test_car.getTrunk().equals(aCar.getTrunk())) && (test_car.getGearbox().equals(aCar.getGearbox())) && (test_car.getPrice() <= aCar.getPrice()) && (test_car.getExpeople() <= aCar.getExpeople())) { test_car.setMake(aCar.getMake()); make = test_car.getMake(); //model=car[i].getModel(); //test_car.setMake(make); //test_car.setModel(model); //resultt.setText(make); //resultt.setText(test_car.getMake()); } } //resultt.setText(test_car.getMake()); resultt.setText(make); } public void map_search(View view) { String uri = "http://maps.google.com/maps?saddr=" +test_car.getMake(); Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(uri)); intent.setPackage("com.google.android.apps.maps"); startActivity(intent); } }。

模态打开第一个实例而不是正确的

1 个答案: