标签: angular-material-6

我正在按照文档中的示例使用mat-autocomplete组件和输入，并且已将输入配置为使用标签，并且具有非浮动的占位符文本，如下所示：

<mat-form-field floatLabel="never">
  <input 
    type="text" 
    placeholder="Search..." 
    aria-label="Number" 
    matInput 
    [formControl]="search" 
    [matAutocomplete]="auto">
  <button 
    mat-button 
    *ngIf="search.value" 
    matSuffix 
    mat-icon-button 
    aria-label="Clear" (click)="clearSearch()">
      <mat-icon>close</mat-icon>
  </button>
  <mat-autocomplete 
    #auto="matAutocomplete" 
    (optionSelected)="goToResult($event)">
    <mat-option 
      *ngFor="let result of searchResults" 
      [value]="result">
      {{result.id}}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

单击输入开始输入字符时，占位符不会消失，直到我输入第一个字符。我是否缺少一些应设置的config \ properties？

还是我需要设置一个占位符值绑定并对其进行设置\自己清除？

谢谢

如何获取从组件中的“ 角材料垫”选择列表中选择的所有值的列表。给定的示例显示了要在模板中显示但不在组件中显示的值。我正在尝试修改此问题中给出的解决方案，但对我不起作用。这是我当前的代码：

模板：

<mat-selection-list #selected [(ngModel)]="readingTypesSelected" (ngModelChange)="onSelection($event)" >
  <mat-list-option *ngFor="let readingType of readingTypes">
    {{readingType.name}}
  </mat-list-option>
</mat-selection-list>

零件：

    onSelection(e, v) {

    console.log(e);
    console.log(v);    
  }

以下内容已记录到控制台：

如何从中提取所选选项的实际值？

解决方案：

模板代码的前两行应为（如接受的解决方案中的stackblitz链接中所述）：

<mat-selection-list #selected (selectionChange)="onSelection($event, selected.selectedOptions.selected)" >
      <mat-list-option *ngFor="let readingType of readingTypes" [value] ="readingType">

到目前为止，我正在使用材质设计来创建示例应用程序，但是我注意到材质设计的开箱即用字体对于不同的组件而言是不同的。对于材质对话框中的材质标题元素，标题以漂亮的Roboto字体显示，但材质对话框的内容以罗马字母显示：

这是对话框的HTML组件：

<h3 mat-dialog-title>{?{title}}</h3>
<mat-icon color="primary">error_outline</mat-icon>
<mat-dialog-content>
    <ul>
        <li *ngFor="let error of errorMessages">
          {?{error}}
        </li>    
      </ul>
</mat-dialog-content>

我不想创建自定义样式，而是希望直接使用与元素关联的默认样式。如果我加

body {
  font-family: Roboto, Arial, sans-serif;
  margin: 0;
}

我的gobal styles.css修复了mat-dialog-content内的字体，但我不想这样做。

而且，该图标是如此之小，以至于您可以清楚地看到它们。有没有一种方法可以在运行时从图标库中选择更大的图标集？提前致谢！

我使用它是MatDialogRef为了从组件调用模态。关闭时ModalComponent，我尝试取回数据，但 似乎没有任何信息传回。

dialogRef = dialog.open(ModalComponent,ConfigObj).afterClosed
  .subscribe(data => console.log(data));

Modal 的所有其他功能（包括从baseComponent到传递数据）ModalComponent似乎都工作正常。

我正在使用Angular 6和Angular Material.我试图从mat-chip和自动完成中保存所选对象或所选对象列表.我能够将字符串值发送到fruits []数组,但无法将所选对象发送到fruits []数组.请帮我找一个解决方案.谢谢.

我的演示项目链接:stackblitz上的演示代码

我将angular 6 与angular material 6.4.2 一起使用，但我无法在自动完成时正确显示错误。

我创建了一个堆栈闪电战来向您展示行为，这是链接

我的目标是按预期在风格化的自动完成上显示错误。

非常欢迎所有帮助:)

先感谢您。

干杯，马塞洛

我使用Angular 6.0.8同Angular Material theme版本6.4.0

每当我尝试稍微修改材质主题时，它永远不会起作用，因为我总是发现材质主题属性会覆盖我的 CSS 属性，如下所示：

currentColor   .mat-input-element (material theme)
initial        input, textarea, select, button (user agent stylesheet)
#1072BA        .English
#1072BA        .English
#1072BA        body

仅应用第一个属性（其余的被删除）

我尝试了多种变体来解决这个问题，但没有一个奏效（比如使用重要的或改变导入主题的顺序）

那么在 Material 主题和用户样式表中更改小东西的正确方法是什么？（例如，应用此英语规则）

我的styles.scss如下，它运行良好，只有覆盖颜色和字体等材质主题不起作用：

@import '~@angular/material/prebuilt-themes/indigo-pink.css';

/* You can add global styles to this file, and also import other style files */

/* prevent clicking in the wizard nav header */
.mat-horizontal-stepper-header{
  pointer-events: none !important;
}

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(./assets/material_icons/material_icons.woff2) …

如何制作 Material 自定义表单字段控件（如这个）以支持表单验证并使用 mat-error 显示它们？我知道常规 matInput 指令使用 ErrorStateMatcher ( doc )，但我不明白如何将其与自定义表单字段链接。

我正在使用：Angular V6.1.0，Angular Material V6.4.1

我正在尝试捕获 HTTP 错误并使用 MatSnackBar 显示它们。我试图在我的应用程序的每个组件中展示这一点（那里有一个 http 请求）。以免做重复的代码

否则，我应该在每个组件中重复相同的代码，以显示插入错误的 MatSnackBar。

这是我的服务：

import { Injectable } from '@angular/core';
import { HttpErrorResponse } from '@angular/common/http';
// import { HttpClient, HttpErrorResponse, HttpRequest } from '@angular/common/http';
import { Observable, throwError, of, interval, Subject } from 'rxjs';
import { map, catchError, retryWhen, flatMap } from 'rxjs/operators';
import { url, ErrorNotification } from '../globals';
import { MatSnackBar } from '@angular/material';
import { ErrorNotificationComponent } from '../error-notification/error-notification.component';


@Injectable({
  providedIn: 'root'
})
export class XhrErrorHandlerService …

我有一个垫子菜单下拉菜单，其中有一个垫子按钮。我想删除用户单击下拉菜单后出现的覆盖层。

我可以通过编写以下 css 来删除悬停覆盖。

.no-hover-effect ::ng-deep .mat-button-focus-overlay {
  background-color: transparent;
}

这就是 mat-button 的 html 代码的样子。

    <div class="mat-menu-wrapper mat-menu-size" [matMenuTriggerFor]="abc">
      <button mat-button class="mat-button no-hover-effect">
        <span class="mat-button-wrapper"><span class="mat-menu-text">
            xyz</span>
        </span>
      </button>
      <mat-menu #abc="matMenu">
        <button mat-menu-item>
          xyz
        </button>
        <button mat-menu-item>
          xyz
        </button>
      </mat-menu>
      <mat-icon class="mat-icon-ui">arrow_drop_down
      </mat-icon>
    </div>