Javascript scrollIntoView（）不'；t使用角材料垫菜单项
我对角度材质和scrollIntoView有问题（{behavior:'smooth'，block:'start'}） 我试图点击一个mat菜单项，它位于mat表中的一个项中，并滚动到一个特定的html标记 这是我的目标Javascript scrollIntoView（）不'；t使用角材料垫菜单项,javascript,angular,typescript,angular-material,Javascript,Angular,Typescript,Angular Material,我对角度材质和scrollIntoView有问题（{behavior:'smooth'，block:'start'}） 我试图点击一个mat菜单项，它位于mat表中的一个项中，并滚动到一个特定的html标记 这是我的目标 <h1 #formUpdate class="titles">{{ editOrCreate$ | async }}</h1> 所有代码.html <!-- INÍCIO - Parte de criar/editar/importar assu
<h1 #formUpdate class="titles">{{ editOrCreate$ | async }}</h1>
<!-- 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 -->
我需要一个帮助，让它像我尝试在我的桌子外面使用mat按钮一样工作formUpdate和按钮回调在同一个组件中吗？是的，formUpdate在同一个组件中，在一个简单的mat按钮中工作，但在mat菜单项中，它不工作…你能创建堆栈闪电来重现吗？对不起，这是不可能的，我必须安装很多依赖项…你能至少在这里发布完整的模板吗？formUpdate和按钮回调在同一个组件中吗？是的，formUpdate在同一个组件中，在一个简单的mat按钮中工作，但在mat菜单项中，它不…你能创建堆栈闪电来复制吗？对不起，这是不可能的，我必须安装很多依赖项…您至少可以在这里发布完整的模板吗？
<button mat-button (click)="formUpdate.scrollIntoView({ behavior: 'smooth', block: 'start' })">Top</button>
<mat-menu #menu="matMenu">
<button mat-menu-item (click)="updateItem(formUpdate )">Top</button>
</mat-menu>
export class WorkspacesComponent{
public updateItem(formUpdate){
target.scrollIntoView({ behavior: 'smooth' });
}
}
<!-- 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 -->
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));
}