我正在尝试Table with expandable rows从https://material.angular.io/components/table/examples实现,但是我收到此错误:

There can only be one default row without a when predicate function.

这个错误来自于我有两个<tr mat-row ...,都没有when谓词(如例子).如果我删除一个,则错误消失.

根据我自己的调查,我发现此功能对于Material来说是新功能.我升级到@ angular/material @ latest和@ angular/cdk @ latest,我仍然遇到错误.

有没有人知道我必须做什么来实现表,如文档中的示例？https://material.angular.io/components/table/examples

我的版本:

Angular CLI: 6.0.8
Node: 8.11.2
OS: win32 x64
Angular: 6.0.4
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.8
@angular-devkit/build-angular     0.6.8
@angular-devkit/build-optimizer   0.6.8
@angular-devkit/core              0.6.8
@angular-devkit/schematics        0.6.8
@angular/cdk                      6.3.1
@angular/cli                      6.0.8
@angular/flex-layout              6.0.0-beta.16
@angular/material                 6.3.1 …

我正在使用Angular 6和Angular Material.更新到最新版本后,控制台在开发中抛出此错误.在生产上它正在发挥作用

Cannot read property 'ngMetadataName' of undefined

它发生在我试图通过服务打开材料对话框时(没有服务他们工作正常).我认为它与注射剂有关,但我不确定.

版本:cli:6.1.5,核心:6.1.4,材料:6.4.6

这是日志堆栈:

CustomDialogComponent_Host.ngfactory.js? [sm]:1 ERROR TypeError: Cannot read property 'ngMetadataName' of undefined
at injectArgs (core.js:1418)
at core.js:1491
at _callFactory (core.js:8438)
at _createProviderInstance (core.js:8396)
at resolveNgModuleDep (core.js:8371)
at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:9064)
at PortalInjector.push../node_modules/@angular/cdk/esm5/portal.es5.js.PortalInjector.get (portal.es5.js:732)
at resolveDep (core.js:9419)
at createClass (core.js:9309)
at createDirectiveInstance (core.js:9186)

任何帮助将不胜感激.

服务中的对话框,其中抛出错误:

 @Injectable({
  providedIn: 'root'
})
export class customService {
  constructor(private store: Store<RootState>, private dialog: MatDialog) {}

const dialogRef = this.dialog.open(customDialogComponent, {
  width: '300px',
  data: {
    loading: false, …

我在用mat-form-field来输入电话号码。这是我的基本代码。

<mat-form-field class="full-width">\n  <input matInput type="number" placeholder="Telefonnummer f\xc3\xbcr R\xc3\xbcckruf" value="" [(ngModel)]="this.inputValues.phone">\n</mat-form-field>\n

顺便说一句，当我将鼠标悬停在该组件上时，该组件会显示箭头/旋转按钮。

请让我知道如何自定义此组件，使其不再显示箭头/旋转按钮。

亲切的问候\n杰

我的要求是在输入框中显示选定的值，并将选定的 Id 和值获取到 .ts 文件中。因为我需要 Id 和 Value，所以我将选项值直接绑定到 [value]。但是如果我这样做，它就会被打印为 [Object Object]。

<mat-form-field appearance="outline" class="w-100">
            <mat-label>Enter Hotel Name</mat-label>
            <input type="text" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
            <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selectedclient($event)">
                <mat-option *ngFor="let option of clients; let i = index" [value]="option">
                    {{ option.name }}
                  </mat-option>
            </mat-autocomplete>
            <mat-icon matSuffix>location_on</mat-icon>
          </mat-form-field>

Ts文件

    options = [
        { id: 1, name: 'One'},
        { id: 2, name: 'Two'},
        { id: 3, name: 'Three'}
       ];

selectedclient(event) {
     console.log(event.option.value);
   }

Stackblitz 编辑器网址：https ://stackblitz.com/edit/angular-mat-select-data-n4tvmj

我有一个项目,我有一个地图(使用ngx-leaflet).
在点击一个标记,我想说明从对话框角材料.

对话框打开但是当我单击关闭按钮时,它会再次重新打开然后关闭.

我尝试了什么:

• 使用超时延迟对话框
• 触发打开对话框的主题
• 删除并创建新的Dialog
• 在ngx-leaflet和angular-material问题中搜索此错误

我发现了什么:

• 发生某些事情后触发所有生命周期钩子(点击,后面的js事件,任何事物)
• Dialog可以很简单,但不会改变任何东西
• 当我关闭时再次打开对话框(在AfterClosed of Dialog中)它正常工作

示例代码的进一步说明:

• 在App.component.ts中,我将一个事件处理程序绑定到每个标记,然后在另一个函数中打开该对话框
• 代码是我在网上找到的这个项目的一个分支(只是更新了依赖项)

演示

我在这里做了一个演示:示例项目.

这个问题是参考这个 Github问题,mat-menu使用鼠标悬停不能切换,我基本上试图用角度材料的菜单替换基于bootstrap的水平导航菜单.阻止我复制基于bootstrap的菜单的唯一一件事就是mat-menu在悬停时打开和关闭.正如上面的Github问题所提到的,有一些解决方法可以实现我想要的,比如使用mouseEnter

(mouseenter)="menuTrigger.openMenu()"

或者在Mat-menu中添加一个span以便绑定mat-menu,

<mat-menu #menu="matMenu" overlapTrigger="false">
  <span (mouseleave)="menuTrigger.closeMenu()">
    <button mat-menu-item>Item 1</button>
    <button mat-menu-item>Item 2</button>
  </span>
</mat-menu>

但是没有一个解决方案似乎涵盖了每一个小场景,

例如

如上面的Github问题所述,第一个SO解决方案存在以下问题.

• 将鼠标光标悬停在按钮上会弹出菜单.但是如果你点击按钮,它将隐藏并显示菜单.恕我直言,这是一个错误.
• 要隐藏菜单,用户需要单击菜单外部.理想情况下,如果鼠标光标位于 超过400毫秒
  的区域(包括按钮,菜单和子菜单)之外,则菜单将被隐藏
  .

并且在试图解决上述问题之一但不能正常工作的跨度解决方案中,例如

悬停MatMenuTrigger确实mat-menu按预期打开,但如果用户在不输入的情况下移开鼠标mat-menu,则它不会自动关闭,这是错误的.

同时移动到其中一个级别的两个子菜单也关闭了一级菜单,这不是我想要的,

PS将鼠标从一个打开的菜单移动到下一个兄弟菜单不会打开下一个菜单.我想这可能是难以实现提到这里,但我认为,其中的一些可能实现的吧？

这是一个基本的stackBlitz,它重现了我正在经历的,任何帮助表示赞赏.

我有一个清单，它使用由 MatTableDataSource 提供的 mat-table 组件。

在 component.html

<table mat-table [dataSource]="dataSource" matSort>

在 component.ts

dataSource = new MatTableDataSource();

当我点击删除一个项目时，在来自服务器的成功回调上，我通过重新实例化 MatTableDataSource(this.resources) 更新列表以反映新的结果集，并像这样传入新的结果集。这确实有效...

this.PHService.getResources().subscribe(resources => {
  this.resources = resources;
  this.dataSource = new MatTableDataSource(this.resources);
  this.dataSource.sort = this.sort;
});

然而，即使这有效，我觉得这是错误的。

我读过一些文章，指出我必须扩展数据源？并调用 renderRows() 方法？我已经尝试过这个，但我似乎无法让它在我的场景中工作。

我知道这是代表我缺乏理解。

任何帮助/建议将不胜感激。

提前致谢。

我在我的项目中使用角材料。我想在每次点击addItem按钮时添加额外的步进项目（mat-step）。

我在这里创建了一个plunker。https://stackblitz.com/edit/angular-enmq1z?file=app%2Fstepper-overview-example.ts

谁能帮我这个？

提前致谢。

我正在尝试向材质表添加不同的过滤器.更确切地说,我正在尝试重现类似于以下GIF的内容

为此,我在以下Github线程中关注irowbin的响应,但根据他的指导原则,我无法真正生成我想要的内容

在Stackblitz或Github上有任何工作示例,所以我可以在mattable中关注并创建多个搜索过滤器吗？

我使用的是 angular 6.1.3 和 angular/material 6.4.5（都是最新版本）但是当我运行以下代码时，它总是有一个蓝色的选择框。

我在 chrome 和 IE 上都试过这个，两者都有同样的问题。

有什么办法可以去掉蓝框吗？

谢谢！

<mat-menu #usermenu [overlapTrigger]="false">
        <button mat-menu-item>
                <mat-icon>face</mat-icon>
                <label>Profile</label>
            </button>

            <button mat-menu-item>
                <mat-icon>exit_to_app</mat-icon>
                <label>Logout</label>
            </button>
</mat-menu>