离子/角度，不在视野范围内时隐藏的元素

Question

我在背景中有一个带有pdf图像的视图，用户可以单击该图像的某个位置并向int添加精确点（类似于Google地图），然后存储这些点并在他回来时进行渲染。该image-pdf可以大于移动视图的尺寸，因此可以滚动x / y轴。问题是，当用户在初始视图之外有一个定位点时，除非用户单击图像，否则该定位点是不可见的，然后该定位点将变为可见状态（始终在dom中）。查明的项目是缺陷

背景以下：

<ion-content>
  <ion-scroll  scrollX="true" scrollY="true" zoom="true">
      <defect *ngFor="let defect of visibleDefects" [defect]="defect" [scale]="scale"></defect>
  <div id="container" (click)="addDefect($event)" #container>
    <canvas id="canvas">
    </canvas>
  </div>
  </ion-scroll>
</ion-content>

缺陷html：

<div class="marker-holder" (click)="showDetails()">
  <ion-icon #icon [class.pulsate-bck]="animate" name="pin" [ngClass]="defect.priority.toLowerCase()"></ion-icon>
</div>

defect.ts

Component({
  selector: 'defect',
  templateUrl: 'defect.html'
})
export class DefectComponent {

  text: string;
  animate = false;

  constructor(private modalCtrl: ModalController) {
    console.log('Hello DefectComponent Component');
    this.text = 'Hello World';
  }

  @Input() defect: Defect;
  @Input() scale: number;

  @HostBinding('style.left.px')
  get left() {
    return this.defect.posX * this.scale;
  }

  @HostBinding('style.top.px')
  get top() {
    return this.defect.posY * this.scale;
  }

点击之前

点击后：

dom不会像隐藏的或类似的东西发生变化