你好。一般是 Angular 和 JS 的新手。
所以。有清晰的用户界面。此页面组件中调用方法的支持者上的按钮:
changeQty(restQty: number, uidItem: string)
{
this.itemQtyUpdateService.updateItemQty(uidItem, restQty)
.subscribe(
(item: Item[]) => {
this.item = item;
// тут вызываем модальное окно
}
当该服务完成后,您需要打开一个模块窗口,其中包含来自该方法的“项目”对象的数据。
在徒劳的尝试中,该指令被创建:
import { Directive } from '@angular/core';
import { ElementRef } from '@angular/core/';
import { OnInit } from '@angular/core/';
@Directive({
selector: '[appModal]'
})
export class ModalDirective implements OnInit {
constructor(private element: ElementRef) { }
ngOnInit(): void {
console.log(this.element);
this.element.nativeElement.clrModalOpen = 'opened';
}
showModal() {
this.element.nativeElement.clrModalOpen = 'true';
console.log(this.element);
}
}
在其中创建了 showModal () 方法,在我看来,它将“clrModalOpen”元素属性的值更改为激活窗口。这是 Clarity ui 包中的模态窗口代码:
<clr-modal appModal [(clrModalOpen)]="opend" [clrModalClosable]="false">
<h3 class="modal-title">No "x" in the top-right corner</h3>
<div class="modal-body">
<p> Для </p>
<p> По заказу </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" (click)="opened = false">
Я все правильно положил!
</button>
</div>
</clr-modal>
此代码位于应调用它的 HTML 页面的末尾。
我从以下逻辑着手:我在 html 代码中创建一个元素 - 我将指令绑定到它 - 在指令中我创建更改其状态的方法 - 我根据需要从主组件调用指令的方法。
我究竟做错了什么 ?
在组件中,添加opened: boolean = false;
尝试这个: