我有以下材料自定义 sass 文件：

@import '../node_modules/@angular/material/theming';
@include mat-core();

$app-primary: mat-palette($mat-red, 700, 800);
$app-accent: mat-palette($mat-red, 700, 800);
$app-warn: mat-palette($mat-red, 700, 800);
$app-theme: mat-light-theme($app-primary, $app-accent, $app-warn);

$app-input-primary: mat-palette($mat-red, 100, 200);
$app-input-accent: mat-palette($mat-red, 100, 200);
$app-input: mat-light-theme($app-input-primary, $app-input-accent);


@include mat-core-theme($app-theme);
@include mat-checkbox-theme($app-theme);
@include mat-radio-theme($app-theme);
@include mat-input-theme($app-theme);

样式正确应用于复选框和单选框，但不适用于输入字段。

这是我定义输入字段的方式：

<md-form-field>
    <input mdInput placeholder="Card holder name">
</md-form-field>

下图显示了红色样式应用于收音机，但输入丢失了样式

如果我使用单行更改细分包含，则@include angular-material-theme($app-theme);红色样式适用于输入，但我的想法是为输入字段使用不同的调色板。

包括提供者:Constructur中的MatDialog

      constructor(groupService: GroupService, public dialog: MatDialog) 

我在运行时遇到以下错误

     Error: No provider for InjectionToken mat-dialog-scroll-strategy!

我已将Matdialog包含在"app.module.ts"中我是否需要一个不同的提供商以及哪一个？我使用角度材料2.0.0b12

谢谢

我们如何将 Angular Material 中 matInput 的输入向右对齐？

我目前的代码：

<mat-form-field>
  <input matInput type="number" id="amount" placeholder="Amount"
    [ngModel]="entry.amount | number :'1.2-2'"
    (ngModelChange)='entry.amount=$event' />
</mat-form-field>

所需的输出：

我正在使用带有角度材料的 angular 4 来构建一张桌子。我希望在mat-sort-header以下模板上有条件地添加。

<mat-header-cell *matHeaderCellDef mat-sort-header>Id</mat-header-cell>

我尝试了以下代码：

<mat-header-cell *matHeaderCellDef [mat-sort-header]=" column!='id' ? column : false ">Id</mat-header-cell>

但它仍然在该列的表中添加排序标题。

我的整个表格如下所示，并且工作正常，除了排序标题问题：

  <mat-table #table1 [dataSource]="records" matSort class="mat-cell">

    <ng-container *ngFor="let column of keys" [matColumnDef]="column">
      <mat-header-cell *matHeaderCellDef [mat-sort-header]=" column!='actions' ? column : false ">
        <p *ngIf=" column!='actions' ">{{ column }}</p>
        <button *ngIf=" column=='actions' " mat-icon-button color="primary" (click)="functionA()">
          <mat-icon class="indigo-icon" aria-label="Example icon-button with a heart icon">add</mat-icon>
        </button>

      </mat-header-cell>
      <mat-cell *matCellDef="let row; let i=index;">
        <p *ngIf=" column!='actions' ">{{ row[column] }}</p>
        <button *ngIf=" column=='actions' " mat-icon-button …

正如您可能从角度材料文档中了解到的那样,mat-expansion-panel将@Output命名为"opened",这是在打开手风琴项目时发出的.我想抓住那个打开的事件并确定哪个面板被打开了.但是这个简单的代码(下面)总是只返回undefined.我做错了什么？此输出是仅发出未定义还是我错过了什么？材料文档没有说明这种情况.

component.html

<mat-accordion multi>
  <mat-expansion-panel (opened)="openGroup($event)" *ngFor="let element of Data">
    <mat-expansion-panel-header>
      <mat-panel-title>
        <ul class="nav-tabs">
          <li class="col-xs-3">{{element.param1}}</li>
          <li class="col-xs-5">{{element.param2}}</li>
          <li class="col-xs-3">{{element.param3}}</li>
        </ul>
      </mat-panel-title>
    </mat-expansion-panel-header>

    <div>
      <p>{{element.content}}</p>
    </div>
  </mat-expansion-panel>
</mat-accordion>

component.ts

Data = [
  // This returns from backend, this is only for show that the Data is not empty
  { /* some data here*/ },
  { /* some data here*/ },
  { /* some data here*/ }
];

openGroup(e) {
  console.log(e);
}

我想使用角度材料设计的 Angular 2+实现自动完成,除非他们输入至少1个字母,否则不应出现选项.

默认情况下,即使输入为空,自动完成也可在焦点上切换,因此我想更改此行为.

我试图在mat-autocomplete元素上添加一个条件*ngIf="inputField.value",以便仅在输入有值时显示选项,但它返回错误:

错误:尝试打开未定义的实例mat-autocomplete.确保传递给的id matAutocomplete是正确的,并且您尝试在ngAfterContentInit挂钩后打开它.

此外,我试图[matAutocomplete]="auto"在输入字段中添加一个条件,但它也返回错误.

我注意到,正在显示的自动完成选项时,元素cdk-overlay-container和mat-autocomplete-panel正在密切之前创建</body>,他们的链接断开与原部件,因此它通过CSS隐藏困难.

你有想法怎么做吗？

请遵循Stackblitz上的代码.

谢谢!

您能告诉我在按钮末尾放置图标的正确方法吗？请参阅下面我的代码：

html

<mat-grid-list cols="1" rowHeight="100px">
    <mat-grid-tile [colspan]="1" [rowspan]="1" >
        <div>
            <button mat-raised-button color="primary" flex class="expanded-button" style="text-align: left" [matMenuTriggerFor]="userprofile">
            <span>User Profile</span><mat-icon matSuffix style="float: right; position: relative;">chevron_right</mat-icon>
            </button>
        </div>

        <mat-menu #userprofile="matMenu" xPosition="before">
            <button mat-menu-item>View Profile</button>
            <button mat-menu-item >Change Password</button>
        </mat-menu>
    </mat-grid-tile>
</mat-grid-list>

CSS

.expanded-button {
    display: block;
    width: 190px;
}

.icon-in-menu {
    position: relative;
    margin-right: 5px;
}

通过上面的代码，这就是我得到的：

箭头未与文本对齐。你能帮忙吗？谢谢。

在 Angular 7 应用程序的单独子模块中加载自定义 Angular Material 2 主题的问题

我有角度包装模块（app 模块）和许多独立的延迟加载子模块。每个子模块就像一个完全独立的应用程序，需要自己的角度材质主题。

我为每个子模块创建了自定义主题，并尝试使用相对路径在每个组件的.scss文件中引用自定义主题。

一些 Material 组件应用自定义主题（按钮），而一些（mat-form-field）仅采用在 style.scss 中指定的主题。

我可以避免这种情况的一种方法是在 angular.json 的“样式”数组中包含每个自定义主题，但我担心，通过这样做，每个独立的子模块（应用程序）将不得不加载每个主题的编译后的 .css这将是开销。

这个或任何更好的解决方案有任何已知问题吗？

home-app.component.scss：

@import './theme.scss';

对比。

angular.json

...
"styles": [
    "src/styles.scss",
    "src/app/orgs/home/theme.scss" // <-- FIXED BY ADDING THIS
],
...

预期： 在home-app.component.scss 中声明的主题将被加载并应用于 home-app.component.html 中使用的每个材料组件

实际： 如果我不将"src/app/orgs/home/theme.scss" 添加到angular.json，styles.scss 中声明的自定义主题将应用于home-app.component.html 中使用的一些材料组件, 部分材质组件会使用home-app.component.scss 中指定的导入主题