完全呈现DOM后如何显示按钮

Question

我有一个包含2个网格的页面，我想使“ export excel”按钮仅在两个网格完全加载后才可见。正如您在HTML波纹管上看到的那样，此网格位于子组件的内部

<p-tabPanel header="Validated">
        <input type="button" name="button" value="" [hidden]="!ready"  (click)="showDialog()" title="Export Excel" class="export_Excel_Button"/>
        <gr-report-result-validated-source></gr-report-result-validated-source>
        <br>
        <gr-report-result-validated-target></gr-report-result-validated-target>
    </p-tabPanel>
    <p-tabPanel header="Discrepancies">
        <input type="button" name="button" value=""  title="Export Excel" [hidden]="!ready" (click)="showDialog()" class="export_Excel_Button"/>
        <gr-report-result-discrep-source></gr-report-result-discrep-source>
        <br>
        <gr-report-result-discrep-target></gr-report-result-discrep-target>
    </p-tabPanel>
    <p-tabPanel header="GAPS">
            <input type="button" name="button" value=""  title="Export Excel" [hidden]="!ready" (click)="showDialog()" class="export_Excel_Button"/>
         <gr-report-result-gap></gr-report-result-gap> 
    </p-tabPanel>

ts

export class ReportResultComponent implements OnInit, AfterViewInit{
   constructor(private router: Router,private route: ActivatedRoute,private service:ReportService ) { }
 ready:boolean=false;

    @ViewChild(ReportResultGapComponent) rrGapsComp;
    @ViewChild(ReportResultValidatedSourceComponent) rrValidatedSource;
    @ViewChild(ReportResultValidatedTargetComponent) rrValidatedTarget;
    @ViewChild(ReportResultDiscrepSourceComponent) rrDiscrepanciesSource;
    @ViewChild(ReportResultDiscrepTargetComponent) rrDiscrepanciesTarget;

    ngOnInit(){
        this.reportInfo=this.service.getData()
    }
    ngAfterViewInit(){
        this.ready=true
    }

}

我尝试了这种方法，但是在网格完全加载之前显示了按钮

Answer 1

您可以使用此：

<ng-component *ngIf="isLoaded">
your code
</ng-component>

在您的ts

isLoaded=false

      ngAfterViewInit(){
           this.isLoaded=true;
        }