scrollIntoView() 不適用於有角度的材料 Mat-Menu-Item

Question

我有角度材料和scrollIntoView（{行為：'平滑'，塊：'開始'}）的問題。

我試圖單擊一個墊子菜單項，它位於墊子表中的一個項目內，然后滾動到一個特定的 html 標記

這是我的目標

<h1 #formUpdate class="titles">{{ editOrCreate$ | async }}</h1>

第一次嘗試

這是我需要工作的 html 代碼

<mat-menu #menu="matMenu">
    <button mat-menu-item (click)="formUpdate.scrollIntoView({ behavior: 'smooth', block: 'start' })">Top</button>
</mat-menu>

上面的代碼不起作用，但如果我以不同的方式嘗試，比如我桌子外面的按鈕，它可以工作我試過的代碼

<button mat-button (click)="formUpdate.scrollIntoView({ behavior: 'smooth', block: 'start' })">Top</button>

上面的代碼有效

第二次嘗試

我試圖在 file.ts 中創建它，就像可以在下面的代碼中看到的那樣

文件.html

<mat-menu #menu="matMenu">
    <button mat-menu-item (click)="updateItem(formUpdate )">Top</button>
</mat-menu>

文件.ts

export class WorkspacesComponent{

    public updateItem(formUpdate){
        target.scrollIntoView({ behavior: 'smooth' });
    }
}

所有代碼.html

<!-- INÍCIO - Parte de criar/editar/importar assunto(workspace) -->

<section class="at-container edit-create-table wrap-row display-flex mat-elevation-z2 new-wksp" #formUpdate>

    <form class="form" [formGroup]="(workspaceForm$ | async)" #formDirective="ngForm" (ngSubmit)="executeOperation(null, formDirective)">

        <!-- Title -->
        <h2 class="titles">{{ editOrCreate$ | async }}</h2>
        <!-- Title -->

        <!-- name Form field-->
        <mat-form-field class="form-field">
            <input formControlName="name" matInput placeholder="Nome" required>
        </mat-form-field>
        <!-- name Form field-->

        <!-- Description Form field -->
        <div class="new-wksp-txtarea">
            <mat-form-field class="form-field">
                <textarea matInput formControlName="description" placeholder="Descrição" required></textarea>
            </mat-form-field>
        </div>
        <!-- Description Form field -->

        <!-- Language Form field -->
        <mat-form-field class="form-field">
            <mat-select formControlName="language" placeholder="Idioma" [(value)]="language" required>
                <mat-option value="pt-br">Português</mat-option>
                <!-- <mat-option value="en-us">English</mat-option> -->
                <!-- <mat-option value="es-la">Español</mat-option> -->
            </mat-select>
        </mat-form-field>
        <!-- Language Form field -->

        <!-- Import Form -->
        <div class="new-wksp-file display-flex wrap-row">
            <form class="new-wksp-file-form display-flex wrap-row" #spreadsheet="ngForm" [attr.disabled]="(disabled$ | async)"
                enctype="multipart/form-data" id="spreadsheet" name="spreadsheet" (ngSubmit)="executeOperation(spreadsheet, null)"
                novalidate>
                <div class="new-wksp-file-form-toggle display-flex wrap-row">
                    <h3 class="new-wksp-file-form-toggle-title display-flex">Importar planilha ?</h3>
                    <span class="yes-not ml-2" [ngClass]=" !(import$ | async ) ? 'yes-not-active' : 'yes-not-inactive' ">Não</span>
                    <mat-slide-toggle class="toggle" [checked]="(import$ | async )" [disabled]="(disabled$ | async)"
                        (change)="setActive(!import$.value)"></mat-slide-toggle>
                    <span class="yes-not" [ngClass]=" (import$ | async ) ? 'yes-not-active' : 'yes-not-inactive' ">Sim</span>
                </div>
                <div *ngIf="(import$ | async )" class="new-wksp-file-form-select">
                    <div class="chose-file display-flex wrap-row">
                        <div class="import-divFile">
                            <span class="import-divFile-fileName">{{ !(csv$ | async) ? (fileName$ | async) : NAS }}</span>
                            <input #file type="file" class="" (change)="selectFile($event, false)" accept="application/json"
                                hidden>
                        </div>
                        <button type="button" [disabled]="(disabled$ | async)" class="at-btn ot-btn" (click)="file.click()">Escolher
                            Arquivo</button>
                    </div>

                    <div class="new-wksp-divButton display-flex">
                        <button class="at-btn at-btn-reset" type="reset" [disabled]="!(fileSelected$ | async)" (click)="setActive(false)">Cancelar</button>
                        <button type="submit" class="at-btn at-btn-submit ml-2" [disabled]="(!(fileSelected$ | async) || (disabled$ | async))">Importar
                            Planilha
                        </button>
                    </div>
                </div>
                <!-- Download Template -->
                <div *ngIf="(import$ | async )" class="display-flex wrap-row download-template onImportForm">
                    <h2 class="download-template-title">Fazer download do Template de Assunto?</h2>
                    <input #template type="file" (change)="selectFile($event, true)" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
                        hidden>
                    <button type="button" [disabled]="(disabled$ | async)" class="at-btn ot-btn" (click)="template.click()">Download
                        Template</button>
                </div>
                <!-- Download Template -->
            </form>
        </div>
        <!-- Import Form -->

        <!-- Download Template -->
        <div *ngIf="!(import$ | async )" class="display-flex wrap-row download-template">
            <h2 class="download-template-title">Fazer download do Template de Assunto?</h2>
            <input #template type="file" (change)="selectFile($event, true)" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
                hidden>
            <button type="button" [disabled]="(disabled$ | async)" class="at-btn ot-btn" (click)="template.click()">Download
                Template</button>
        </div>
        <!-- Download Template -->

        <!-- POST/PUT Workspace button -->
        <div *ngIf="!(import$ | async )" class="new-wksp-divButton display-flex">
            <button class="at-btn at-btn-reset" type="reset" (click)="reset()" [disabled]="(!workspaceForm$.value.dirty && workspaceForm$.value.invalid)">Limpar</button>
            <button type="submit" *ngIf="!(import$ | async )" class="at-btn at-btn-submit ml-2" [ngClass]="workspaceForm$.getValue().invalid ? 'submit-button-inactive' : 'submit-button-active' "
                [disabled]="workspaceForm$.getValue().invalid">{{ editOrCreate$ | async }}</button>
        </div>
        <!-- POST/PUT Workspace button -->

    </form>

</section>

<!-- FIM - Parte de criar/editar/importar assunto(workspace) -->

<!-- INÍCIO - Corpo Tabela  -->
<section class="at-container table-container mb-5 mat-elevation-z2 card">

    <!-- header -->
    <div class="table-header-div">
        <h2 class="titles">
            Assuntos Existentes
        </h2>
        <!-- Busca -->
        <mat-form-field class="filter-header-select">
            <input matInput (keyup)="searchWorkspace($event.target.value)" placeholder="Qual assunto você deseja ver?">
            <span matSuffix><img src="../../../assets/images/search.png"></span>
        </mat-form-field>
        <!-- Busca -->
    </div>
    <!-- header -->

    <!-- table -->
    <mat-table class="table table-more at-default-table" [dataSource]="dataSource" matSort>

        <ng-container matColumnDef="workspace">
            <mat-header-cell *matHeaderCellDef mat-sort-header class="at-intent-table-name-cell display-flex"> Nome
                Assunto
            </mat-header-cell>
            <mat-cell *matCellDef="let workspace" class="at-intent-table-name display-flex"> {{workspace?.name}}
            </mat-cell>
        </ng-container>

        <ng-container matColumnDef="createdAt">
            <mat-header-cell *matHeaderCellDef mat-sort-header> Data de Criação </mat-header-cell>
            <mat-cell *matCellDef="let workspace"> {{workspace?.createdAt | date:'dd/MM/yyyy HH:mm:ss' }} </mat-cell>
        </ng-container>

        <ng-container matColumnDef="createdBy">
            <mat-header-cell *matHeaderCellDef mat-sort-header> Usuário de Criação </mat-header-cell>
            <mat-cell *matCellDef="let workspace">{{workspace?.createdBy ? workspace?.createdBy?.name : ''}}
            </mat-cell>
        </ng-container>

        <ng-container matColumnDef="updatedAt">
            <mat-header-cell *matHeaderCellDef mat-sort-header> Data de Alteração </mat-header-cell>
            <mat-cell *matCellDef="let workspace"> {{ workspace?.updatedAt | date:'dd/MM/yyyy HH:mm:ss' }} </mat-cell>
        </ng-container>

        <ng-container matColumnDef="updatedBy">
            <mat-header-cell *matHeaderCellDef mat-sort-header> Usuário de Alteração </mat-header-cell>
            <mat-cell *matCellDef="let workspace"> {{workspace?.updatedBy ? workspace?.updatedBy?.name : ''}}
            </mat-cell>
        </ng-container>

        <ng-container matColumnDef="button">
            <mat-header-cell class="at-more-button-cell" *matHeaderCellDef></mat-header-cell>
            <mat-cell *matCellDef="let workspace" class="at-more-button-cell">
                <button [matMenuTriggerFor]="menu" class="at-more-button">
                    <i class='fa fa-ellipsis-v' aria-hidden="true"></i>
                </button>
                <mat-menu #menu="matMenu">
                    <button mat-menu-item (click)="updateItem(workspace, 'Atualizar Assunto', formUpdate)">Atualizar
                        Assunto</button>
                 </mat-menu>
            </mat-cell>
        </ng-container>

        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row, let i = index; columns: displayedColumns;"></mat-row>

    </mat-table>
    <!-- table -->

    <!-- img empty-data -->
    <div *ngIf="(!dataSource || !dataSource?.data || (dataSource.data?.length == 0))">
        <app-empty-data [subTitle]="'Adicione um assunto preenchendo os campos e depois clique em CRIAR ASSUNTO'"></app-empty-data>
    </div>
    <!-- img empty-data -->

    <!-- paginator -->
    <div [hidden]="!dataSource?.data || (dataSource.data.length == 0)">
        <mat-paginator [pageSizeOptions]="[10, 25, 50]"></mat-paginator>
    </div>
    <!-- paginator -->
</section>
<!-- FIM - Corpo Tabela -->

文件.ts 方法

public updateItem(workspace: Workspace, updateOption: string = '', formUpdate) {
        let description;
        formUpdate.scrollIntoView({ behavior: 'smooth', block: 'start' })
        if (updateOption === 'Criar Versão Assunto') {
            description = `Criado a partir do workspace '${workspace.name}' em ${new Date().toLocaleDateString()}`;
            updateOption = 'Criar Assunto';
        } else {
            description = workspace.description;
        }
        this.store.dispatch(new userActions.WorkspacesSelect(workspace._id));
        this.language$.next('pt-br');
        this.workspaceForm$.next(this.newForm(workspace.name, description, workspace.language));
        this.store.dispatch(new userActions.WorkspaceEditOrCreateState(updateOption));
    }

這兩種情況都不起作用。

我需要幫助才能使它像我在桌子外使用墊子按鈕的嘗試一樣工作

Answer 1

對我來說，將使用 scrollIntoView() 的函數包裝到 setTimeout 中。

scrollTo(el: HTMLElement) {
  setTimeout(()=> {
    el.scrollIntoView({behavior: 'smooth'});
  }, 0);
}