小编Edr*_*ric的帖子

我在那里我正在尝试使用谷歌的材料图标.我从来没有遇到任何问题但是由于他们更新了,我找不到关于如何使用那里概述集的答案.有些人工作但有些人没有.

例如,我正在尝试使用大纲集中的account_circle图标,但无法弄清楚如何!

https://material.io/tools/icons/?search=account%20circ&icon=account_circle&style=outline

欢迎任何帮助.最后一件事是我通过Google Web Fonts加载Material Icons.

问候.

我想使用mat-errors在我的Angular 5 SPA中呈现服务器端错误.

这是我到目前为止所做的,它的确有效

<mat-form-field class="col-6">
    <input matInput formControlName="firstName">
    <mat-error [hidden]="!form.controls.firstName.hasError('required')">This field is required and cannot be empty</mat-error>
    <mat-error [hidden]="!form.controls.firstName.hasError('other')">Some other error</mat-error>
</mat-form-field>

表单的每个字段看起来都很相似.输入字段和下面的许多mat-error标记.单个输入字段附加了大量重复代码.此外,添加新的错误消息会导致在需要它的每个字段中添加它.我认为这是一个很好的空间来引入管理错误消息的组件,并注入表单控件它决定显示哪个错误(我希望所有字段都有常见的错误消息).

所以我想这样做

<mat-form-field class="col-6">
    <input matInput formControlName="firstName">
    <app-mat-errors [field]="form.controls.firstName"></app-map-errors>
</mat-form-field>

并且在app-mat-errors组件模板中包含mat-error我们曾经在每个字段中拥有的所有代码

<mat-error [hidden]="!field.hasError('required')">This field is required and cannot be empty</mat-error>
<mat-error [hidden]="!field.hasError('other')">Some other error</mat-error>
etc....

使用这种方法,我遇到了正确渲染组件的问题.

当放入时<app-mat-errors>,<mat-error>标签嵌入app-mat-errors标签中并且没有正确显示(即使没有错误,它们也不会始终显示和显示)

有没有什么方法角度可以渲染组件没有父标签？或者您有任何想法如何使其正常工作？提前致谢.

默认情况下，当esc按下按钮时，对话框关闭。但是，我不希望这种预期的行为。

我想做的是防止在esc按下按钮时关闭窗口，但仍然允许在背景上单击以关闭对话框。如何才能做到这一点？

我已经尝试过这样的事情。但是，它不起作用：

openEditDialog() {
  const dialogRef = this.dialog.open(EditPlaceDialogComponent, {
    width: '90%',
    height: '720px'
  });

  dialogRef.keydownEvents().subscribe(e => {
    if (e.keyCode === 27) {
      e.preventDefault();
      dialogRef.disableClose = false;
    }
  });

  dialogRef.afterClosed().subscribe(result => {
    console.log('The dialog was closed');
  });
}

我开始在我的一个项目中使用 Material。查看<mat-autocomplete>文档网站的示例...

<mat-form-field class="example-full-width">
  <input matInput placeholder="State" aria-label="State" [matAutocomplete]="auto" [formControl]="stateCtrl">
    <mat-autocomplete #auto="matAutocomplete">
    <mat-option *ngFor="let state of filteredStates | async" [value]="state.name">
    <span>{{state.name}}</span> |
  </mat-option>
</mat-autocomplete>

ts：

    export class AutocompleteOverviewExample {        
      stateCtrl = new FormControl();
      filteredStates: Observable<State[]>; 
      states: State[] = [
            { name: 'Arkansas'  },
            ...
            { name: 'Texas' }
          ];

          constructor() {
            this.filteredStates = this.stateCtrl.valueChanges
              .pipe(
                startWith(''),
                map(state => state ? this._filterStates(state) : this.states.slice())
              );
          }

          private _filterStates(value: string): State[] {
            const filterValue = value.toLowerCase();
            return this.states.filter(state => state.name.toLowerCase().indexOf(filterValue) …

我遇到了一个问题，我需要为*ngFor角度4中的循环内的每个数据行提供唯一的id值。

我的代码是这样的：

<div *ngFor="let row of myDataList">
  <div id="thisNeedsToBeUnique">{{ row.myValue }}</div>
</div>

当我将Angular 6 Material Date Picker与任何遮罩（ngx-mask，angular2-mask，angular2-text-mask）结合使用并使用时formControlName，出现错误：

错误：多个自定义值访问器将表单控件与未指定名称属性匹配

是否有适用于“物料日期选取器”和formControlName属性的蒙版？

<input matInput [matDatepicker]="myDatepicker" formControlName="dateOfbrd" mask="00/00/0000">
  <mat-error *ngFor="let validation of validationMessages.dateOfDischarge">
  <mat-error class="error-message" *ngIf=enrfrm.get('dateOfbrd').hasError(validation.type)">
    {{validation.message}}
  </mat-error>
</mat-error>
<mat-datepicker-toggle matSuffix [for]="myDatepicker"></mat-datepicker-toggle>
<mat-datepicker #myDatepicker></mat-datepicker>

组件： https: //material.angular.io/components/snack-bar/examples

我有一个页面是父部分（'#wrapper_container'）。我想在“#wrapper_element”的子元素的中心弹出小吃栏。

谢谢

我有三个操作支持我的 SpeedDialAction，但是当我尝试记录单个操作的 onClick 事件时，我得到了未定义的信息。

我尝试过使用不同的函数作为操作，还在方法调用中尝试了箭头函数语法

onClick={e => action.action(e)}

和

onClick={action.action}

行动：

const actions = [
    { icon: <Add />, name: 'Product', action: handleDialogOpen },
    { icon: <Add />, name: 'Addon', action: handleDialogOpen },
    { icon: <Label />, name: 'Tag', action: handleDialogOpen }
  ]

快速拨号：

<SpeedDial
          ariaLabel='SpeedDial example'
          className={classes.speedDial}
          icon={<SpeedDialIcon />}
          onBlur={handleClose}
          onClick={handleClick}
          onClose={handleClose}
          onFocus={handleOpen}
          onMouseEnter={handleOpen}
          onMouseLeave={handleClose}
          open={open}
        >
          {actions.map(action => (
            <SpeedDialAction
              tooltipOpen
              key={action.name}
              icon={action.icon}
              tooltipTitle={action.name}
              onClick={action.action}
            />
          ))}
        </SpeedDial>

handleDialogOpen 只是尝试记录事件

我希望输出是一个事件对象，而不是未定义的。

问题：重新渲染组件时，应用于由 Material-UI/JSS 生成的类名的样式会错误地更改。

设置：我正在提供一个create-react-app使用 Material-UI jss 样式和 Rails 后端的 React 应用程序（使用 构建）。我不确定 Rails 部分的相关性，因为当我build/index.html直接在本地机器上打开文件时会发生同样的事情——Rails 后端处理根请求以提供静态客户端文件，如此处所示。在任何一种情况下，静态构建都是使用 来创建的npm run build，它运行react-scripts build（从create-react-app）。

问题示例：我有一个<img>给定的元素className: {classes.logo}。构建后，classes.logois "jss3"，它采用以下正确的 CSS：

.jss3 {
    height: 50px;
    position: relative;
    // [...more]
}

这看起来像这样 -<img>组件位于应用程序标题的左上角。

我“继续作为客人”，并呈现新组件。但是请注意徽标图像，它现在具有新样式：

发生了什么？该<img>组件现在显示以下样式：

.jss3 {
    height: 2em;
    padding: 7px;
    overflow: scroll;
    position: relative;
}

这个 css 来自不同组件的完全不同的样式对象：

// FileEntry.js

  fileEntry: {
    position: 'relative',
    padding: …

我的角度材料应用程序遇到了一些麻烦。我正在使用带有分页器的数据表。数据不必排序。

加载数据时，我显示了一个垫子旋转器

<div *ngIf="schools !== undefined">
        <mat-spinner *ngIf="showSpinner" style="margin:0 auto;"></mat-spinner>
        <div *ngIf="!showSpinner">
            Keine Daten gefunden.
        </div>
</div>
<div *ngIf="schools !== undefined">
   <mat-table [dataSource]="dataSource"> 
      ...
   </mat-table>
   <mat-paginator [pageSizeOptions]="[10, 20, 50, 100]" [pageSize]="20" showFirstLastButtons></mat-paginator>
</div>

在正常情况下，我正在加载数据，当加载数据时，旋转器停止旋转，然后显示数据。这工作得很好。

但是对于一个大约有 400 行的表，我遇到了这个问题：

当数据成功加载时，旋转器变得非常非常慢大约一秒钟，并且数据表显示所有内容。（由分页符分隔）

从 api 加载数据大约需要 400 毫秒，解析数据大约需要 3 毫秒，所以这不应该是问题。

我正在这样加载数据：

ngOnInit() {
    setTimeout(() => {
      this.showSpinner = false;
    }, 5000);

    this.userID = this.authService.getCurrentUser.uid;
    this.loadData();
}

loadData() {
    this.apiService.getSchools().subscribe((schoolsData: any) => {
      this.schools = this.refParser.parse(schoolsData);
      this.dataSource = new MatTableDataSource(this.schools);

      this.cdr.detectChanges();
      this.dataSource.paginator = this.paginator;
    });
} …