标签: angular-material-6

我已将 multiTemplateDataRows 添加到我的 <mat-table multiTemplateDataRows>

并有以下几行：

<mat-header-row *matHeaderRowDef="data.displayedColumns"></mat-header-row>
<tr mat-row *matRowDef="let row; columns: data.displayedColumns;"></tr>
<tr mat-row *matRowDef="let row; columns: ['detail'];"></tr>

但我仍然收到错误“只有一个默认行没有 when 谓词函数。”

我正在使用Angular 6和Angular Material.当我单击编辑按钮时,将在选择中初始化辅助,SSC和男性值.但我无法做到这一点.我只能在单击"编辑"按钮后在下拉列表中显示"男性"值.所以我想在下拉列表中显示所有值,并为动态选择传递对象.谢谢.

我的代码链接在这里:stackblitz链接

对于我当前的项目，我正在尝试将拖动元素从一个位置拖动到一个 div 内的另一个位置。为此，我使用了 Angular Material 7 CDK 拖放功能。它在整个页面上拖动，但只想在特定的 div 内拖动。但是我在 Angular Material 7 CDK 拖放中没有看到任何控制边界的选项。

谁能告诉我如何控制材料中的边界或建议其他一些可用于 angular 7 的插件。？

谢谢。

我找到了如何自定义材质切换按钮的精彩链接。我成功设置background-color和font-weight我想的方式

@import '~@angular/material/theming';

@include mat-core();

$app-primary: mat-palette($mat-indigo);
$app-accent:  mat-palette($mat-pink, A200, A100, A400);

$app-theme: mat-light-theme($app-primary, $app-accent);

@mixin mix-app-theme($app-theme) {
  $primary: map-get($app-theme, primary);
  $accent: map-get($app-theme, accent);

.mat-button-toggle-checked {
    background-color: mat-color($primary);
    font-weight: bold;
    color:mat-color($primary); // <=== does not work!!!
  }
}

// Include the mixin
@include mix-app-theme($app-theme);

但不知何故，字体本身保持黑色 - 这不是使用color="primary".

知道如何包括fore-color- 正确吗？

我已将 Angular 版本从 5.2 升级到 7.2.0，并使用以下版本的软件包：

“ @angular/flex-layout ”：“ ^7.0.0-beta.22 ”，打字稿版本：3.2.2，“ @angular/cdk ”：7.2.1，“ @angular/cli：7.1.4 ”

我收到构建错误：

“MediaQueryListEvent”不可分配为 MediaQueryList 类型。

代码：

export class LayoutComponent implements OnInit, OnDestroy {

  private _router: Subscription;

  mediaMatcher: MediaQueryList = matchMedia(`(max-width: ${SMALL_WIDTH_BREAKPOINT}px)`);
  url: string;
  sidePanelOpened;

  constructor (
    private _element: ElementRef,
    private router: Router) {
    this.mediaMatcher.addListener(mql => zone.run(() => {
      this.mediaMatcher = mql; //i am getting error here Type 'MediaQueryListEvent' is not assignable to type 'MediaQueryList'.
                  //Property 'onchange' is missing …

我mat-select从有角材料下拉菜单。
它具有来自API的状态列表。在下拉菜单中有10多个选项。

去做 ：

• 我想从.stackblitz 中mat-select使用。中的“ 搜索”选项，mat-select search但这确实很难理解。

请给我建议简单的方法。

我的JSON代码

"{
  "data": [
    {
      "id": 32,
      "name": "Andaman And Nicobar Islands"
    },
    {
      "id": 16,
      "name": "Odisha"
    },
    {
      "id": 34,
      "name": "Puducherry"
    },
    {
      "id": 19,
      "name": "Uttar Pradesh"
    },
    {
      "id": 5,
      "name": "Uttarakhand"
    },
    {
      "id": 6,
      "name": "Andhra Pradesh"
    }
  ],
  "statusCode": 200
}"

我正在使用 Angular 6 mat-h​​orizo​​ntal-stepper。我想给它一些特定的宽度，并希望将其保留在页面的中心。对于 mat-h​​orizo​​ntal-content-container 我能够将其保持在中心

.mat-horizontal-content-container 
    text-align: center;
    overflow: hidden;
    padding: 0;

但是如何将标题保持在页面中心。我正在尝试这个，但它不起作用。

.mat-stepper-label-position-bottom .mat-horizontal-stepper-header-container 
    width: fit-content !important;
    align-items: center;

谁能帮我解决这个问题吗？

我正在尝试使用卡片过滤数据，但我没有设法使用卡片而不是数据表过滤它

例子：

import { Component, OnInit } from '@angular/core';
import {MatTableDataSource} from '@angular/material/table';

@Component({
  selector: 'app-publicaciones',
  templateUrl: './publicaciones.component.html',
  styleUrls: ['./publicaciones.component.css']
})
export class PublicacionesComponent implements OnInit {
  private users = ['Fabio', 'Leonardo', 'Thomas', 'Gabriele', 'Fabrizio', 'John', 'Luis', 'Kate', 'Max'];
  
  dataSource = new MatTableDataSource(this.users);
  constructor() { }

  ngOnInit() {
  }

  applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }

}

.container {
    max-width: 900px;
    justify-items: center;
    justify-content: center;
    text-align: center;
    margin: auto;
    max-width: 80%;
    padding-left: 80px;
    padding-top: 8%;
}

.example-card {
    padding-left: 105px; …

我正在使用 Angular 6 和 Angular Material 6。在这里，我尝试使用面包屑创建多级菜单。我已经正确使用了多级菜单，但无法使用选定的面包屑导航菜单。当我单击选定的面包屑时，菜单无法正确组织。

我的演示链接：stackblitz 链接在这里

我使用Angular 6和Angular Material 6.我想要mat-chip字段.当我输入mat-chip字段时,将启用保存按钮,否则将被禁用.输入字段是必需的,但不能要求mat-chip字段.请帮我找到解决方案.谢谢.

我的示例代码链接在这里:stackblitz demo

我很熟悉这个错误,但我在更新到Angular Material 6.4.7之后才开始看到这个.

我的所有模块都引用了我自己的MaterialModule,它导出了MatDialogModule.我没有MatDialogRef的任何提供程序设置 - 以前不需要.

和[MatDialogTitle - > MatDialogRef]的交易是什么？那是什么意思？

在dev和prod版本中,一切似乎都运行良好.我无法弄清楚造成这种情况的原因.

有没有办法追溯到某事？

谢谢

core.js:1673 ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[MatDialogTitle -> MatDialogRef]: 
  StaticInjectorError(Platform: core)[MatDialogTitle -> MatDialogRef]: 
    NullInjectorError: No provider for MatDialogRef!
Error: StaticInjectorError(AppModule)[MatDialogTitle -> MatDialogRef]: 
  StaticInjectorError(Platform: core)[MatDialogTitle -> MatDialogRef]: 
    NullInjectorError: No provider for MatDialogRef!
at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:1062)
at resolveToken (core.js:1300)
at tryResolveToken (core.js:1244)
at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1141)
at resolveToken (core.js:1300)
at tryResolveToken (core.js:1244)
at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1141)
at resolveNgModuleDep (core.js:8369)
at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:9057)
at resolveDep (core.js:9422)
at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:1062)
at resolveToken …