标签: angular-material-5

我正在使用角度材料的这个例子创建一个角度表https://material.angular.io/components/table/overview无论如何都要以excel或pdf格式导出它？

我对Angular 5并不陌生，并且刚刚开始学习它。

最近，我一直在尝试使用Angular 5 Material为我的应用程序创建一个包含多个菜单的菜单栏。
鼠标进入时将触发/打开菜单，鼠标离开菜单时将关闭菜单。
我的问题是每当鼠标悬停在第一个菜单上时，它将加载第二个菜单的菜单项。

这是问题的屏幕截图：


这是我的代码：
mainmenu.component.html：

<div>
    <button mat-button [matMenuTriggerFor]="menu1" 
      (mouseenter)="openMyMenu()">Trigger1</button>
    <mat-menu #menu1="matMenu" overlapTrigger="false">
        <span (mouseleave)="closeMyMenu()">
            <button mat-menu-item>Item 1</button>
            <button mat-menu-item>Item 2</button>
        </span>
   </mat-menu>
</div>
<div>
    <button mat-button [matMenuTriggerFor]="menu2"
      (mouseenter)="openMyMenu()">Trigger2</button>
    <mat-menu #menu2="matMenu" overlapTrigger="false">
        <span (mouseleave)="closeMyMenu()">
            <button mat-menu-item>Item 3</button>
            <button mat-menu-item>Item 4</button>
        </span>
    </mat-menu>
</div>

mainmenu.component.ts：

import { Component, OnInit, ViewChild } from '@angular/core';
import {MatMenuTrigger} from '@angular/material'

@Component({
  selector: 'app-mainmenu',
  templateUrl: './mainmenu.component.html',
  styleUrls: ['./mainmenu.component.css']
})
export class MainmenuComponent implements OnInit {
  @ViewChild(MatMenuTrigger) matMenuTrigger: MatMenuTrigger; …

我有角材料数据源。角材料版本是 ^5.0.3 排序工作。但是，对于某些列，它的排序不正确。数字和文本在哪里。例如，排序结果如“XXX”、“1”、“1tesxt”、“1”、“OPD”、“OXD”、“12”。

<mat-table #table [dataSource]="dataSource" matSort > 
  <ng-container matColumnDef="model">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Model </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.model}} </mat-cell>
  </ng-container>

感谢你的帮助。

这是我的示例代码

主控制器

<mat-tab-group id="report">
<mat-tab label="Poll">
<div class="demo-tab-content">
  <app-poll></app-poll>
</div>

</mat-tab>
<mat-tab label="Survey">
<div class="demo-tab-content">
  <app-survey></app-survey>
</div>
</mat-tab>

在每个选项卡中，都有不同的控制器命名 - Poll 和 Survey。如果用户从一个选项卡移动到另一个选项卡数据，我想在这里刷新\重置一个选项卡数据。

有什么简单的方法可以实现吗？

每当服务器出现错误时，我都会在我的 angular 应用程序中使用 angular material dialogcomponent来打开一个对话框。

如果同时出现多个错误，它会打开多个对话框，这对我来说很好。我想使用closeAll方法一次关闭所有对话框。

当尝试使用closeAll获取此错误的方法时：

error TS2339: Property 'closeAll' does not exist on type 'MatDialogRef<DialogComponent, any>'.

我如何打开对话框：

 constructor(private dialog: MatDialog) {}
const dialogRef = this.dialog.open(DialogComponent, {
          width: "500px",
          height: "500px",
          disableClose: true,
          hasBackdrop: true,
          data: { name: this.name, animal: this.animal }
        });

对话框组件.ts

onClose(): void {
    this.dialogRef.closeAll();
  }

@NgModule({
  declarations: [
    DialogComponent,
    ...
  ],
  imports: [
    MatDialogModule,
    BrowserAnimationsModule,
    ...
  ],
  providers: [
      ...
  ],
  entryComponents: [ DialogComponent],
  bootstrap: [AppComponent] …

我试图使用Material Angular自动完成功能，但遇到了displayWith函数，该函数显然可以用作选择时显示的输出。我想在显示功能中调用自定义功能，例如

displayFn(id) {
 return this.getValue(id)
}
getValue(id) {
 /**return some string
}

对于自动完成

<mat-autocomplete #autoOutlet="matAutocomplete" [displayWith]="displayFn">
  <mat-option *ngFor="let option of outletFilterOptions | async [value]="option.outletId">
   {{ option.outletName }}
  </mat-option>
</mat-autocomplete>

如您所见，我使用id而不是整个对象作为模型。

当显示函数返回未定义this.getValue的错误时，我在Stack Overflow中搜索了一种解决方案，并建议我使用类似的内容[displayWith]="displayFn.bind(this)"。

但不幸的是，这对我也不起作用。我正在使用Angular材质5.1.0。

我有什么想念的吗？

如何从输入字段手动将新行添加到角度材质表中.

请看这个图像,如果我添加一个状态名称和状态代码,它应该出现在下表中,请帮助我如何使用angular4实现它

我已使用角形材料版本：5.2.1

并想知道如何禁用其动画，尤其是matDialog。

我尝试了@ .disabled，但是没有运气。

这是一个代码示例,我从 步进器的官方角度文档中分离出来:https://packblitz.com/edit/angular-tth817

在我的分支中,我正在努力实现以下几点:

• 我想隐藏步进头.

  • 我试过通过样式.mat-horizontal-stepper-header-container(实际上只是添加一个边框)尝试这样做.

• 我强迫最后一步的内容很高.在那里,您可以看到每个步骤上的按钮不再对齐.我想要做的是让步进器内容填充其父级(.container粗红色虚线),然后我可以使用弹性框来使按钮全部对齐在底部.

  • 我添加了mat-stepper-horizontal, mat-stepper-horizontal规则,这些也不适用.

你能告诉我吗:

• 为什么这些规则根本没有出现？(F12开发人员工具,显示所有其他规则,但不是那些特定于步进器的规则).这里发生了什么？

• 一般来说 - 我应该使用什么哲学来设计踏步机？我能想到的最好的选择是在每个步骤中放入一个内容div,并用vh和vw或其他东西来调整它.

• 我怎么摆脱标题？

我试图让 Side Material Sidenav 在我打开栏时推送内容，显然在它关闭时推送内容；被推回原位的元素。目前它所做的是开放内容

这是我的 app-header.component.html

<!--- Toolbar starts here-->
<div class="container-toolbar">
    <mat-toolbar color="primary" class="fixed-header">
        <img src="" />
        <button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()">
            <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
        </button>
        <span class="spacer"></span>
        <button type="button" mat-icon-button href="">
            <mat-icon matTooltip="Salir">exit_to_app</mat-icon>
        </button>
    </mat-toolbar>
</div>

<!--- Sidenav starts here -->
<mat-sidenav-container style="height:100%;width:100%;">
    <mat-sidenav #drawer fixedInViewport="true" [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'side' : 'push'"
        [opened]="(isHandset$ | async)" style="box-shadow: 0 5px 5px #999;z-index: 1;">
        <mat-nav-list>
            <mat-list-item>
                <a routerLink="/dashboard">Home</a>
                <mat-icon …