Wie Überlauf zu erkennen

Question

Ich versuche, den Überlauf zu erkennen.

Ich versuche, Benutzer Bilder in einer einzigen Zeile aufzulisten und wenn es übergelaufen ist abhängig von der Bildschirmgröße des Geräts/Änderungen der Bildschirmausrichtung.

Ich habe versucht, dies mit Medienanfragen zu tun, aber keine luck.I ist mit Ionic 3

.html:

<ion-row style="padding: 7px;" nowrap> 
    <ion-row style="overflow: hidden; height: 55px;"> 
     <ion-col col-auto *ngFor="let image of images"> 
      <img src="assets/images/image.png" /> 
     </ion-col> 
    </ion-row> 

    <ion-col *ngIf="showButton" col-auto align-self-center> 
    <img src="assets/images/more3.svg"> 
    </ion-col> 
</ion-row> 

.ts:

showButton = true; 

///// 
constructor(public navCtrl: NavController, 
      public modalCtrl: ModalController, 
      private postService: PostService, 
      private app: App, 
      private el: ElementRef){ 

    this.images = new Array(10); 
} 

Ich versuche den Knopf more zu verstecken, wenn die Zeile nicht mehr überläuft Ed und Items passen auf den Bildschirm und zeigen, wenn es nicht ist.

irgendwelche Vorschläge, thanx

Answer 1

ok, fand ich eine Arbeit um, aber es ist nicht die beste Lösung

.html:

/// 
<ion-row id="innerRow" style="overflow: hidden; height: 55px;"> //added id 
    <ion-col col-auto *ngFor="let image of images"> 
     <img src="assets/images/image.png" /> 
    </ion-col> 
</ion-row> 
//// 

.ts:

showButton = true; 

///// 
constructor(public navCtrl: NavController, 
     public modalCtrl: ModalController, 
     private postService: PostService, 
     private app: App, 
     private ngZone: NgZone){ 

    this.images = new Array(10); 

    window.onresize = (e) => {      // detect window resize 
    this.ngZone.run(() => { 
     let row = document.getElementById('innerRow'); 
      this.showButton = false;     // reset 
      if (this.isOverFlowed(row)){ 
       this.showButton = true; 
      } 
     }); 
    }; 
    } 
} 

ngAfterViewInit(){ 
    let row = document.getElementById('innerRow'); 
    if (this.isOverFlowed(row)){ 
     this.showButton = true; 
    } 
    } 

    isOverFlowed(element){ 
    return element.scrollHeight > element.clientHeight ||element.scrollWidth > element.clientWidth; 
    } 

Ich bin offen für jeden Vorschlag zur Verbesserung dieses Codes, danke