小编Edr*_*ric的帖子

默认情况下，当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>

假设我们prop在组件类中有一个变量，我们通过模板中的插值来使用它（stackblitz demo）：

组件类：

@Component({...})
export class AppComponent  {
  prop = 'Test';
  ...
}

模板：

<p>{{ this.prop }}</p>
<p>{{ prop }}</p>

为什么在 Angular 中可以this在模板中使用关键字而没有任何警告/错误（即使在 AOT 模式下）？它的背后是什么？

编辑

根据答案中的注释：this 指的是为其呈现模板的组件本身。但我也可以创建一个模板变量并使用this以下方法访问它：

<input #inp> {{ this.inp.value }}

在这种情况下，我们inp在组件类中没有变量，我仍然可以使用{{this.inp...}}. 魔法？

现在点击汉堡菜单我得到下拉列表而不是我需要它在鼠标悬停在汉堡菜单上这里是堆栈闪电战链接。

我正在尝试在材质输入字段中使用材质图标。该图标应显示材质工具提示。

结果是一个很好的动画，但完全没有样式（如主文本）并且工具提示的位置完全错误。

我哪里做错了？

我的HTML：

<section>
    <div class="row">
      <mat-form-field>
        <input matInput name="newPin" placeholder="Neue PIN" required type="password"
           [(ngModel)]="newPin" [disabled]="!selectedToken">          
          <mat-icon matTooltip="{{getPinTooltip()}}" [matTooltipPosition]="'below'">
              info
          </mat-icon>         
      </mat-form-field>
      <mat-form-field>
        <input matInput name="controlPin" type="password" required 
           placeholder="Neue PIN wiederholen"
           [(ngModel)]="controlPin" [disabled]="!selectedToken">
      </mat-form-field>
    </div>
</section>

还有我的少：

body {
  font-family: Helvetica, FreeSans, sans-serif;
  background-image: url('./assets/images/background.jpg');
}

section {
  margin-top: 2em;
}

.row {
  margin-bottom: 1rem;
}

mat-form-field {
  color: @inputfield-text-color;
  width: 95%;
  margin-bottom: .5em;

  .mat-input-element {
    background-color: @inputfield-background-color;
    border-radius: .3em;
    padding: 1em 0.6em 0.2em 0.6em;
    line-height: 1.7em;
    &:disabled { …

我将 Angular 7 与 Material Snackbar 一起使用。我想将 Snackbar 的颜色更改为绿色。

在 app.component.ts 中，我有：

this.snackBarRef = this.snackBar.open(result.localized_message, 'X', {
    duration: 4000,
    verticalPosition: 'top',
    panelClass: 'notif-success'
});

this.snackBarRef.onAction().subscribe(() => {
    this.snackBarRef.dismiss();
});

在 app.component.scss 中，我有：

.notif-success {
    color: #155724 !important; // green
    background-color: #d4edda !important;
    border-color: #c3e6cb !important;
    .mat-simple-snackbar-action {
        color: #155724 !important;
    }
}

但是 Snackbar 仍然以其默认颜色显示。

我可以看到notif-success 类已经应用到snackbar

<snack-bar-container class="mat-snack-bar-container ng-tns-c18-84 ng-trigger ng-trigger-state notif-success mat-snack-bar-center mat-snack-bar-top ng-star-inserted" role="status" style="transform: scale(1); opacity: 1;">

为什么自定义 css 不起作用？

我正在研究一个黑色背景的有角度的材料日期选择器。如何将日期选择器图标、下划线和占位符文本的默认颜色更改为全白色？

<mat-form-field>
    <input matInput [matDatepicker]="picker" placeholder="Choose a date">
    <mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

我有多个 CdkDrag 元素，它们是从我组件中数组上的 ngFor 循环呈现的。当我删除一个元素时，我会拼接数组。然后一些元素将更新那里的位置。我该如何避免？

我试图在删除其中一个元素之前获取所有可拖动元素的 freeDragPosition，然后重置它们的位置，但它没有用。

这是我的 app.component.html

<div class="container" id="container">
  <div *ngFor="let f of fields; let i = index;" 
    class="textField"
    [attr.data-guid]="f.guid"  
    (mouseenter)="onFieldHover($event)" 
    cdkDrag 
    cdkDragBoundary="#container"
    (cdkDragEnded)="onDragEnded($event)"
    [cdkDragFreeDragPosition]="f.position">
    <div class="textField-inner">
      <span style="color: hotpink; font-weight: bold">{{f.guid}}</span>
    </div>
    <div class="textField-options">
      <div class="textField-move" cdkDragHandle>
        <svg width="24px" fill="currentColor" viewBox="0 0 24 24">
          <path d="M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z"></path>
          <path d="M0 0h24v24H0z" fill="none"></path>
        </svg>
      </div>
      <div class="textField-remove">
        <i class="fas fa-trash-alt" (click)="onRemoveTextField(i)"></i>
      </div>
    </div>
  </div>
</div>
<button type="button" (click)="onTextFieldAdded()">Add a …