时间戳

首页 > 解决方案 > 子组件中的按钮不显示

angular - 子组件中的按钮不显示

问题描述

如下所示，我有一个名为的组件Treatment-as-tiff，在它的 html 文件中应该有一个按钮。当特定操作发生时，该按钮应该可见。site-map-component问题是当我运行代码并将该操作设置为发生时，按钮不显示

请让我知道我在这里缺少什么

TreatmentAsTIFF html：

<button  *ngIf="iTreatmentAsTIFFVisibilityPasser.visibilityState" 
    title="Get Treatment As TIFF" 
    class="btn btn-sm btn-icon" 
    (click)="getTreatmentAsTIFF()">
    {{ "SITE.GET_TREATMENT_AS_TIFF" | translate }}
    <ng-content></ng-content>
</button>

TreatmentAsTIFF.ts：

import { ThrowStmt } from '@angular/compiler';
import { Component, OnInit } from '@angular/core';
import { SYNOPSServicesProviderService} from '../services/SYNOPSServiceProvider/synopsservices-provider.service'
import { Subscription } from 'rxjs';


export interface ITreatmentAsTIFFVisibilityPasser {
  visibilityState: boolean
}

@Component({
  selector: 'app-treatment-as-tiff',
  templateUrl: './treatment-as-tiff.component.html',
  styleUrls: ['./treatment-as-tiff.component.css']
})
export class TreatmentAsTIFFComponent implements OnInit {
  iTreatmentAsTIFFVisibilityPasser:ITreatmentAsTIFFVisibilityPasser;
  subscriptionEvtEmitterOnTratmentAsTIFFEmitted: Subscription;

  constructor(private synopsServicesProvider:SYNOPSServicesProviderService) { 
    this.iTreatmentAsTIFFVisibilityPasser = {} as ITreatmentAsTIFFVisibilityPasser;
    this.iTreatmentAsTIFFVisibilityPasser.visibilityState = false
  }

  ngOnInit(): void { 
    this.subscriptionEvtEmitterOnTratmentAsTIFFEmitted = this.synopsServicesProvider.getEventEmitterResponseFoRiskCalculation().subscribe((response: object)=> {
      console.log("OnTratmentAsTIFF response received: ",response)
     });
  }

  public getVisibilityState() {
    return this.iTreatmentAsTIFFVisibilityPasser.visibilityState;
  }
  public setInvisible() {
    this.iTreatmentAsTIFFVisibilityPasser.visibilityState = false
  }
  public setVisible() {
    this.iTreatmentAsTIFFVisibilityPasser.visibilityState = true
  }
  
    private getTreatmentAsTIFF(fieldGeometry):void{
        this.synopsServicesProvider.startWebServiceForGetTreatmentAsTIFF(fieldGeometry);
    }
}

站点地图组件：

import { TreatmentAsTIFFComponent } from '../treatment-as-tiff/treatment-as-tiff.component';

export interface ITreatmentAsTIFFVisibilityPasser {
    visibilityState: boolean
}

iTreatmentAsTIFFButtonVisibilityPasser:ITreatmentAsTIFFVisibilityPasser;
treatmentAsTIFFComponent: TreatmentAsTIFFComponent;

constructor() {
        this.iTreatmentAsTIFFButtonVisibilityPasser = {} as ITreatmentAsTIFFVisibilityPasser;
        this.iTreatmentAsTIFFButtonVisibilityPasser.visibilityState = false
    }
...
...
...
private toggleGetTreatmentAsTIFFButtonToVisible():void{
    this.treatmentAsTIFFComponent.setVisible()
}
private toggleGetTreatmentAsTIFFButtonToInvisible():void{
    this.treatmentAsTIFFComponent.setInvisible()
}

站点地图组件.html：

<app-treatment-as-tiff></app-treatment-as-tiff>

标签： angular

解决方案

这是因为您将in设置visibilityState为false。如果要显示它，请将其设置为 true：iTreatmentAsTIFFVisibilityPasserTreatmentAsTIFFComponent

export class TreatmentAsTIFFComponent implements OnInit {
  ...

  constructor(private synopsServicesProvider:SYNOPSServicesProviderService) { 
    this.iTreatmentAsTIFFVisibilityPasser = {} as ITreatmentAsTIFFVisibilityPasser;
    this.iTreatmentAsTIFFVisibilityPasser.visibilityState = true; // <-- HERE!
  }

  ...
}

或者你没有toggleGetTreatmentAsTIFFButtonToVisible在SiteMapComponent. 而且我确定您对TreatmentAsTIFFComponentinside子元素的引用SiteMapComponent不起作用。

以下是获取TreatmentAsTIFFComponentinside参考的方法SiteMapComponent：

import {
    ...
    ViewChild,
    ...
} from '@angular/core';

...

@Component({
    ...
})
export class SiteMapComponent implements OnInit {
    @ViewChild(TreatmentAsTIFFComponent) treatmentAsTIFFComponent: TreatmentAsTIFFComponent;

...

    private toggleGetTreatmentAsTIFFButtonToVisible():void{
        this.treatmentAsTIFFComponent.setVisible()
    }
    private toggleGetTreatmentAsTIFFButtonToInvisible():void{
        this.treatmentAsTIFFComponent.setInvisible()
    }
}

推荐阅读