Я использую угловой 2 (rc 4) с семантическим интерфейсом для моего приложения. Я использую семантический интерфейс для подтверждения перед удалением продукта из списка продуктов на экране productList. Ожидаемая функциональность следующая: 1) Нажмите кнопку удаления 2) Модифицированные всплывающие окна для подтверждения 3) При нажатии кнопки «Нет»/«Отклонить», «Модальные шкуры» вернитесь к экрану productList. 4) по щелчку да/одобрить, продукт удаляется из списка, а экран productList обновляется, а второй модальный появляется с удаленным успешным сообщением.событие click не запускается во второй раз по семантическому интерфейсу с моментом 2 rc4
Код, написанный ниже, работает нормально и, как ожидается, для первого продукта, который должен быть удален, но когда я нажимаю на удаление для другого продукта, модальный отображается, но событие click на модальном не запускается, и, следовательно, продукт не является удален. Не уверен, удалена ли модальная информация из DOM после ее использования в первый раз. Есть предположения? Заранее спасибо!
productList.html
` <body>
<table class="ui celled table">
<thead>
<tr>
<th>Date Range</th>
<th>Name</th>
<th>Frequency</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let product of products">
<td>{{ product.startDate | date: 'dd MMM y'}} - {{ product.endDate | date: 'dd MMM y' |
ifEmpty:'Ongoing'}}
</td>
<td>{{ product.name }}</td>
<td>{{ product.emailFrequency | titleCase : 1 }}</td>
<td>
<div class="ui stackable three columns grid">
<div class="column">
<button id="edit" class="ui icon basic button" (click)="editProduct(product)">
<img src="/img/edit.svg"/>
<label>Edit</label>
</button>
</div>
<div class="column">
<button id="deleteButton" class="ui icon basic button coupledModal">
<img src="/img/delete-button.svg"/>
<label>Delete</label>
</button>
<coupledModal (onClicked)="deleteProduct($event, product)"></coupledModal>
</div>
</div>
</td>
</tr>
</tbody>
</table>
`
модальные-component.ts
` @Component({
selector: "coupledModal",
template: ``
<div class="ui small first coupled modal">
<div class="header">Are you sure?</div>
<div class="content">
<div class="description">
<p>If you delete this product, it will be gone forever.</p>
</div>
</div>
<div class="actions segments">
<button class="ui basic button grey deny" (click)="onClick(false)">
<i class="remove icon"></i>No thanks</button>
<button class="ui basic button approve" (click)="onClick(true)">
<i class="checkmark icon"></i>Yes please</button>
</div>
</div>
<div class="ui small second coupled modal">
<div class="header">Done!</div>
<div class="content">
<div class="description">
<i class="huge green check circle outline icon"></i>
<p>Product Deleted Successfully.</p>
</div>
</div>
<div class="actions">
<div class="ui basic button ok">
<i class="checkmark icon"></i>Done
</div>
</div>
</div>
`,
})
export class ConfirmModalComponent {
@Output() public onClicked = new EventEmitter<boolean>();
public ngAfterViewInit() {
/* tslint:disable */
$('.coupled.modal')
.modal({
allowMultiple: false,
closable : false,
// detachable: false,
selector : {
close : ".close, .actions .button",
approve : ".actions .approve, .actions .ok",
deny : ".actions .deny"
}
});
// show first of linked modals
$('.first.modal')
.modal('attach events', '.button.coupledModal')
;
// attach events to buttons
$('.second.modal')
.modal('attach events', '.first.modal .button.approve')
;
/* tslint:enable */
}
public onClick(approved) {
this.onClicked.emit(approved);
}
}`
список-component.ts
` @Component({
directives: [ ConfirmModalComponent],
pipes: [TitleCase, IfEmpty, StatusFormat],
providers: [SingleSignonDataService, ProductDataService],
selector: "productList",
templateUrl: "/templates/products/product-list-component.html",
})
export class ProductListComponent implements OnInit {
public products: Product[] = null;
public model: Product;
private dataService: ProductDataService;
constructor(dataService: ProductDataService,
private cookieService: CookieService, private signinService: SingleSignonDataService,
private directTo: Router) {
this.dataService = dataService;
}
public deleteProduct(userAction, product) {
if (userAction) {
this.dataService.deleteProduct(product.id)
.then(result => {
let exists = this.products.indexOf(product);
if (exists > -1) {
this.products.splice(exists, 1);
}
})
.catch((error) => {
this.errorState = JSON.stringify(error);
});
}
}
Demo plunker ссылка: https://plnkr.co/edit/Wxqz5DvUES3nh4RogNnr?p=preview
Благодаря тонну @yurzui. Ваше решение работает хорошо. Как работа, я сделал это. https://plnkr.co/edit/SEzpCZ9cEIGfVYGrQZi9?p=preview. Проводятся здесь, чтобы другие получали выгоду – Chandni