标签: angular-material-7

切换 a 的默认图标mat-expansion-panel是>。设置hideToggletrue 只是隐藏切换图标。有什么办法可以改变它吗？我在官方文档中什么也没找到。如果状态分别是关闭或打开，我想使用+或-图标。

我使用的是Angle 7.0.1和Angle Material 7.0.2，我想添加字体真棒5.4.2图标，并且尝试按照fontawesome网站上的步骤操作，但是我无法获得字体真棒图标字体。

第一：

npm install --save-dev @fortawesome/fontawesome-free

然后在styles.scss中添加：

@import '~@fortawesome/fontawesome-free/scss/fontawesome.scss';

并在_variables.scss中添加：

$fa-font-path: '~@fortawesome/fontawesome-free/webfonts';

现在在app.component.ts中添加：

import { MatIconRegistry } from "@angular/material";

[...]

constructor(
    public matIconRegistry: MatIconRegistry,
  ) {
    matIconRegistry.registerFontClassAlias ('fas');  // tried with 'fas' and with 'fa'
  }

最后我打算用以下命令打印字体很棒的图标：

<mat-icon mat-list-icon fontIcon="fas github"></mat-icon>  // tryed also with 'fas-github', 'fasGithub', 'github', 'fa-github', 'fa github' and 'faGithub'

但是从未打印过字体超赞的图标字体。我错过了一些重要而又显而易见的东西，但是现在我没有看到它。

我想为组件创建测试来检查是否显示 mat-error。

我已经创建了一个测试，但它失败了，因为 DOM 在测试过程中根本没有 mat-error 。尽管在项目提供服务时它工作得很好。

模板片段

<mat-error>
    Error message
</mat-error>

测试设置

describe('MyComponent', () => {
  let component: MyComponent;
  let fixture: ComponentFixture<MyComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        MatFormFieldModule,
        ReactiveFormsModule,
        MatInputModule,
        MatFormFieldModule,
        BrowserAnimationsModule
      ],
      declarations: [MyComponent]
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  fit('should display error', () => {
    const matErrorEl: HTMLElement = 
    fixture.debugElement.query(By.directive(MatError)).nativeElement;
    expect(matErrorEl).toBeTruthy();
  });
});

我正在使用线性垫步进器。

它与 next 一起工作正常。我进行 api 调用，如果成功，则调用 stepper-next 事件而不是使用 matStepperNext 指令。

现在，当用户在步骤 1 中填写所有数据并直接单击下一步（或编辑记录模式下的任何其他）标题中的其他步骤时，由于表单有效，它将重定向到下一步。

我想在此之前进行服务调用并在服务调用成功之前防止步进更改，然后才应该重定向到下一步，否则不应该。

我在文档中找不到任何方法来实现此功能。

任何人都可以建议我该怎么做。我不想禁用标题单击。

我有一个主题列表，每个主题都有一个颜色列表。我用一个按钮打开一个Angular对话框显示所有主题，在对话框中列出该主题的所有颜色，并且可以将这些颜色重新排序@ angular / cdk / drag-drop。

如果我只列出了2-4个主题。我能够毫无问题地重新排列每个主题的所有颜色。但是，如果我有20-30个主题的列表。只有第一个主题可以正常工作，我可以打开对话框并重新排列项目，但是，如果我选择了最后一个项目，则拖放无效。

我尝试调试错误，发现重新排序不起作用时，先前的索引和当前的索引具有相同的值。对于正确的索引，正确的索引是正确的。

我在StackBlitz上构建了一个简单的应用程序，可以在其中重现我遇到的问题。您可以尝试单击列表的第一项的“编辑”按钮，然后看到它可以正常工作，并且可以重新排列颜色，但是尝试重新排列列表中的最后一个主题，您将发现它不起作用。我在控制台中看不到任何错误。我在Chrome和Firefox上都尝试过，但都遇到了相同的问题。

每次拖放颜色时，您还可以在控制台中看到当前索引和上一个索引。

这是该应用程序的链接。

我有一个永远打开的 mat-calendar 控件。在初始加载时，我会突出显示一组日期，这些日期可以执行以下操作：突出显示 mat-calendar 中的某些日期。现在我必须通过单击按钮突出显示今天（或选定的日期）。只有当我更改为不同的月份，然后返回到当前月份的视图时，突出显示才有效。有没有办法动态刷新 mat-calendar？请指教。

https://am-all-imports-zwnjbd.stackblitz.io

我使用角材料步进器。我需要在移动视图上设置填充 0。在开发人员控制台上，我可以通过更改.mat-horizontal-content-container. 但是当我添加时它不起作用.mat-horizontal-content-container{padding:0 !important;}这个问题有什么解决方案吗？

我正在尝试自定义角度材料 mat-form-field ：我能够使用以下方法自定义下划线边框：

::ng-deep.mat-form-field-ripple {
  background-color: yellow;
}

现在我正在尝试将禁用状态下的下划线边框自定义为实线而不是虚线：

我试过这个，但它对下划线不起作用：

::ng-deep.mat-form-field-disabled
 {

 }

我希望它在禁用状态下呈灰色实心

 <mat-form-field>
    <input matInput placeholder="Input" [disabled]='true'>
  </mat-form-field>

我正在尝试提升垫表中悬停的行，因此将<tr>悬停时的高度更改为悬停时的高度，但阴影效果的高度未显示在行的底部，但显示在行的顶部、左侧和右侧。

.html

<div class="mat-elevation-z2" #TABLE>
      <table mat-table [dataSource]="dataSource" matSort>

    <!-- Required Columns... -->

    <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
        <tr mat-row *matRowDef="let row; let e = index; columns: columnsToDisplay;"
          (mouseover)="onMouseOver(e)" [ngClass] = "{'mat-elevation-z24' : e == mouseOverIndex}"></tr>
      </table>
    </div>

.ts

 mouseOverIndex = -1;

public onMouseOver(index) {
    this.mouseOverIndex = index;
  }

.css

.mat-row:hover {
  cursor: pointer;
}

我在这里缺少什么？

我尝试使用“z24”、“z16”、“z8”等，但没有用。

我使用了角度材料芯片控制，这一切都很好。但是，如果自动完成元素保持打开状态以便可以进行多个选择，那就太好了。在默认状态下，您必须将焦点移至不同的控件，然后再返回以重新打开自动完成。

是否可以设置一个选项来保持自动完成打开，直到用户完全远离控件？

<mat-form-field class="example-chip-list">
  <mat-chip-list #chipList aria-label="Fruit selection">
    <mat-chip
      *ngFor="let fruit of fruits"
      [selectable]="selectable"
      [removable]="removable"
      (removed)="remove(fruit)">
      {{fruit}}
      <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
    </mat-chip>
    <input
      placeholder="New fruit..."
      #fruitInput
      [formControl]="fruitCtrl"
      [matAutocomplete]="auto"
      [matChipInputFor]="chipList"
      [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
      [matChipInputAddOnBlur]="addOnBlur"
      (matChipInputTokenEnd)="add($event)">
  </mat-chip-list>
  <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
    <mat-option *ngFor="let fruit of filteredFruits | async" [value]="fruit">
      {{fruit}}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>


import {COMMA, ENTER} from '@angular/cdk/keycodes';
import {Component, ElementRef, ViewChild} from '@angular/core';
import {FormControl} from '@angular/forms';
import {MatAutocompleteSelectedEvent, MatAutocomplete} from '@angular/material/autocomplete';
import {MatChipInputEvent} from '@angular/material/chips';
import {Observable} from 'rxjs';
import {map, startWith} from 'rxjs/operators'; …