javascript - typescript rullningsposition

I min Angular UI-kod har jag en komponentklass som anropar en som nedan

app.component.html

//...
<div class="banner">
    <p-dialog [(visible)]="displayCOI" styleClass="coiDialog" [contentStyle]="{'overflow-y': 'hidden'}" [modal]="true" [style]="{width: '75vw'}" [baseZIndex]="10000" [showHeader]="false"
        [draggable]="false" [resizable]="false">  
        <coi (notify)="onCoIAccept($event)"></coi>
    </p-dialog>
</div>

...///

coi.component.html ser ut som nedan

<div>
<div class="row" style="padding: 10px 0px">
    <div class="col-sm-4">
    <p align="center"><b>Instructions</b></p>                        
    <br>...//
    </div>
    <div #scrollDiv id="scrollDiv" class="col-sm-6" style="height:350px; overflow-y: scroll;" (scroll)="onScroll($event)">
    <p-table #dt [columns]="cols" [scrollable]="true" [value]="usersLi" [(selection)]="selectedUsersLi"  dataKey="id">
    //....
    ..///
    </p-table>
    </div>
    <div class="col-sm-2">
    <div align="center">
        <button pButton type="button" label="Accept" [disabled]="disableAccept" (click)="close()" class="ui-button-rounded"></button>&nbsp;
        </a>
    </div>
</dv>
</div>

coi.component.ts-koden är som följer:

export class coiComponent  {
  @ViewChild("scrollDiv") scrollDiv: ElementRef;
  disableAccept: boolean = false;
  
  ngOnInit():void { 
    this.keys = Object.keys(this.propertyObj); 
    this._utilService.convertKeysToHeader(this.keys,this.cols);
    this.disableAccept = true;    
    this.loadRecords();
  }
  
  
  onScroll(event: any) { 
    // visible height + pixel scrolled >= total height 
    if (event.target.offsetHeight + event.target.scrollTop >= event.target.scrollHeight) {
        this.disableAccept = false;
        console.log("End");
    }
  }
  
   ngOnChanges(changes: SimpleChanges){
    console.log("ngOnChanges" , changes);
    for ( const propName in changes){
        let change = changes[propName];
        if ( propName == 'coi'){
            // console.log('CHANGED...DO HERE');
            console.log(this.scrollDiv.nativeElement.offsetHeight);
            console.log(this.scrollDiv.nativeElement.scrollHeight); 
        }
    
    }
    
    }
}

Som du kan se är modalen uppdelad i 3 DIV. 1. instruktioner, 2: tabell, 3. Acceptera-knapp Modalen i sig har en fast höjd och rullning är dold. Div:en med tabellen har en fast höjd och överskott rullning och det fungerar perfekt. Tabellen kan nu innehålla 30-50 poster så vertikal rullning är aktiverad. Jag vill att acceptera-knappen i den tredje div:en endast ska aktiveras när användaren har rullat tabellen och sett alla poster. Så function (scroll)="onScroll($event)" aktiveras endast när rullningen är fullständig och det fungerar perfekt.

Min fråga är: Vissa användare kan se färre än 5-10 poster vilket betyder att scrollning inte skulle aktiveras för dessa användare och accept behöver också aktiveras för dem. Några förslag på hur man kan göra detta, tack? Jag försökte lägga till ett id för div-taggen som heter "scrollDiv" och #scrollDiv och skicka detta som ett ElementRef och på ngOnChange försöka få offsetHeight och scrollHeight men jag får värdet '0' i alla fall. Kan någon hjälpa mig med detta?

Jag har uppdaterat min fråga. Vänligen ge några förslag. Tack.

Svar #1

Jag ska försöka ge dig en löpande idé, sedan kan du förstå den och tillämpa den på ditt fall. Du kan kolla på den här länken.

Förklaring av exemplet

I komponenten har du 4 viktiga saker att tänka på:

• isActionDisabled är en variabel som anger om din åtgärd bör vara inaktiverad eller inte
• @ViewChild('containerElement') containerElement refererar till den rullbara behållaren för tabellen
• onScrollContainer en metod som körs när du skrollar containerElement
• disableByScroll är en metod som ändrar värdet på isActionDisabled enligt positionen på rullningslisten i containerElement. Om den är längst ner är isActionDisabled false, annars är den true.

Den viktigaste metoden är disableByScroll:

disableByScroll(): void {
  if (this.containerElement) {
    const element = this.containerElement.nativeElement;
    this.isActionDisabled = !(
      element.scrollTop ===
      element.scrollHeight - element.clientHeight
    );
  } else {
    this.isActionDisabled = true;
  }
}

Vänligen läs den här artikeln för att förstå vad jag gjorde. disableByScroll kallas varje gång ett scrollhändelse inträffar på containerElement

onScrollContainer(): void {
  this.disableByScroll();
}

och efter visningsinitiering

ngAfterViewInit(): void {
  this.disableByScroll();
  this.cdr.detectChanges();
}

Det är användbart om du har ett antal objekt som inte aktiverar rullningslisten. Vänligen läs denna guide för att förstå livscykelhändelserna i en Angular-applikation. Som du kan se kallade jag en metod detectChanges av ChangeDetectorRef. Genom att läsa den guiden kommer du att förstå varför.

Angående mallen är den ganska enkel och du kan lista ut det.