提交成功关闭小组

Question

我正在使用Primeng和overlay-panel，我试图关闭成功提交面板中显示的表单的面板。

面板正在加载表单，该表单是一个独立的组件：

主页（使用面板）

<p-overlayPanel #opCP dynamic="true" [showCloseIcon]="true">
  <app-command-packet-details [id]="taskId"></app-command-packet-details>
</p-overlayPanel>

app-command-packet-details.html

正在加载表格...

app-command-packet-details.ts

我想从这里关闭面板

import { OverlayPanel } from 'primeng/overlaypanel';
...
export class CommandPacketDetailsComponent implements OnInit {

 ...
 @ViewChild("opCP") op: OverlayPanel; 
 ...

 this.renderSvc.resubmitCommandPacket(cPacket).subscribe(trans => {
      console.log(trans);
    },
      (err) => {
        console.error(err);
        this.messageSvc.add({ severity: 'error', summary: 'Error!', detail: 'Via command-packet.component' })
      },      
      () => {
        console.log("observable complete Success");
        // close the panel //////////////
        this.op.hide();
        ////////////////////////////////
        this.messageSvc.add({ severity: 'success', summary: 'Submit Success!', detail: 'Via command-packet.component' })
      }
    );
}

Chrome控制台显示此错误

  

错误TypeError：无法读取未定义的属性“隐藏”

Answer 1

我无法确切地说出原因，因为您还没有包含调用此操作的方式的上下文，但是您很可能在呈现视图之前调用了它，因此该元素尚不存在。如果您不了解这是一个问题，那么您将需要学习角度组件的生命周期。

请参见https://angular.io/guide/lifecycle-hooks#lifecycle-sequence

由于viewChild从DOM读取，因此您想在视图呈现且html存在后引用它。您需要在ngAfterViewInit触发后开始执行此操作。如果要循环运行此程序，则可以在运行它之前测试this.op是否存在。

尽管如此，viewChild确实是不得已而为之，我相信您可以通过模板绑定和component属性更好地完成此操作。像

主页（使用面板）

<p-overlayPanel dynamic="true" [showCloseIcon]="true" *ngIf="showOP">
  <app-command-packet-details [id]="taskId"></app-command-packet-details>
</p-overlayPanel>

app-command-packet-details.ts

我想从这里关闭面板

import { OverlayPanel } from 'primeng/overlaypanel';
...
export class CommandPacketDetailsComponent implements OnInit {

 ...
 // get rid of viewChild
 showOp = true;
 ...

 this.renderSvc.resubmitCommandPacket(cPacket).subscribe(trans => {
      console.log(trans);
    },
      (err) => {
        console.error(err);
        this.messageSvc.add({ severity: 'error', summary: 'Error!', detail: 'Via command-packet.component' })
      },      
      () => {
        console.log("observable complete Success");
        // close the panel //////////////
        this.showOp = false;
        ////////////////////////////////
        this.messageSvc.add({ severity: 'success', summary: 'Submit Success!', detail: 'Via command-packet.component' })
      }
    );
}