标签: angular-material2

我有一些按钮

            <button mdTooltip="bye" mdTooltipPosition="left" md-mini-fab>
                BYE
            </button>
            <button mdTooltip="hi" mdTooltipPosition="left" md-mini-fab>
                HI
            </button>

默认情况下，工具提示显示在“悬停”上。有没有办法让它一直显示？（在页面加载和停留时显示）

我正在研究 Angular4，并且一直在使用 Angular 材料。我创建了一个选项卡组，并且想在选择任何选项卡时更改选项卡标签的文本颜色。我尝试过覆盖默认的 CSS，但这对我没有帮助。

我可以覆盖墨迹栏，但无法在选择时覆盖选项卡文本颜色

.mat-ink-bar{
    background-color:#00ADEE;
}
 /*.mat-tab-label::selection{
 color: #00ADEE !important;
 } */

我试图更改选项卡标签颜色的颜色的注释部分。

我刚刚将我的角度材质项目更新为BETA.0.12

更新之前，一切都很好，但更新之后，我不知道我做错了什么

我有这个错误

compiler.es5.js:1694 Uncaught Error: Template parse errors:
Can't bind to 'opened' since it isn't a known property of 'md-sidenav'.
1. If 'md-sidenav' is an Angular component and it has 'opened' input, then verify that it is part of this module.
2. If 'md-sidenav' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
  <md-sidenav-container>

    <md-sidenav mode="side" [ERROR …

我想在 Angular 应用程序中选择垫子表的一个项目（行）。因此我使用角度材质。我想我不知道添加（点击）事件的正确位置，还是我必须以其他方式执行此操作？感谢您的帮助！

<div class="table-container mat-elevation-z8">
  <mat-table #table [dataSource]="dataSource" matSort>

    <ng-container matColumnDef="item_id">
      <mat-header-cell *matHeaderCellDef mat-sort-header> ID </mat-header-cell>
      <mat-cell *matCellDef="let item"> {{item.id}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="item_name">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
      <mat-cell *matCellDef="let item" (click)="onSelect(item)"> {{item.name}} </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>
</div>

该示例不起作用。

我想要的是：如果p1或p2被锁定，所选选项保持不变；但下面的代码工作不正确。所选选项仍然发生变化。有人能给我一些建议吗？

html

<mat-form-field style="text-align: center; width: 25%;">
      <mat-select #singleSwap [(value)]="categoryProduct.sort"  
     (selectionChange)="singleSwapSelectionChange(singleSwap.value,categoryProduct.id)">
         <mat-option *ngFor="let option of options" [value]="option">
              {{ option }}
         </mat-option>
       </mat-select>
    </mat-form-field>

成分

singleSwapSelectionChange(currentSelection: number, id: number) {
    let p1 = this.categoryProducts.find(p => p.sort === currentSelection);
    let p2 = this.categoryProducts.find(p => p.id === id);
    if (p1.is_locked || p2.is_locked) {
      console.log('locked!')
      return;
    }
    p1.sort = p2.sort;
    p2.sort = currentSelection;

我正在创建一个带有垫选择的反应形式。

<mat-form-field>
    <mat-select placeholder="Salutation*" formControlName="salutation">
      <mat-option *ngFor="let salutation of salutations" [value]="salutation.id">
        {{ salutation.label }}
      </mat-option>
    </mat-select>
</mat-form-field>

形式：

this.form = this.fb.group({
  person: this.fb.group({
    salutation: ['', Validators.required],
    firstName: ['', Validators.required],
    lastName: ['', Validators.required],
    email: ['', Validators.required]
  })     
});

我需要根据其他输入值禁用/启用此选择。由于反应式表单不再支持 [disabled]，我使用了以下内容

this.form.get('person').get('salutation').disable();

问题是当我尝试使用以下命令启用选择返回时

this.form.get('person').get('salutation').enable();

它就是行不通。有什么想法吗？

PS：使用禁用属性工作正常，但会引发警告

看起来您正在将禁用属性与反应式表单指令一起使用。如果您在组件类中设置此控件时将disabled 设置为true，则disabled 属性实际上会在DOM 中为您设置。我们建议使用此方法来避免“检查后更改”错误。

  Example: 
  form = new FormGroup({
    first: new FormControl({value: 'Nancy', disabled: true}, Validators.required),
    last: new FormControl('Drew', Validators.required)
  });

谢谢！

给定以下使用 mat-select 的 Angular 组件

export enum AllValues {
  VALUE_A = "A",
  VALUE_B = "B",
  VALUE_C = "C",
}

@Component({
  selector: 'my-app',
  template: `
    <mat-form-field>
      <mat-select ([ngModel])="myValue">
        <mat-option *ngFor="let o of valueOptions" value="{{o}}">{{o}}</mat-option>
      </mat-select>
    </mat-form-field>
    <p> Selected value: {{myValue}} </p>
    `,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  myValue: AllValues = AllValues.VALUE_B;
  valueOptions = Object.keys(AllValues);
}

如何让 myValue 的初始值显示在 UI 的 mat-select 中？该值未随代码的当前状态一起显示。

请点击此 StackBlitz 链接获取完整代码和正在运行的演示。

我正在尝试将电子邮件验证应用于 mat-chip。以下是我实现相同目标的尝试。

https://stackblitz.com/edit/mat-chip-demo-yvmxsk

我的要求是在用户输入无效的电子邮件 ID 时显示 mat-error 并仅突出显示无效的电子邮件 ID。有人可以帮助我吗？

我正在使用角度材料树组件。我能够获取所选节点的详细信息。现在，我想要实现的是获取所选节点或整个父层次结构的父级。你知道我怎样才能做到这一点吗？

我的树在角度材料文档中看起来像这样：

https://stackblitz.com/angular/mrkvpbkolad?file=app%2Ftree-nested-overview-example.ts

我正在尝试为多选下拉菜单设置选定的值，如下所示

//循环以根据条件选择和设置多个复选框

document.getElementsByTagName('mat-pseudo-checkbox')[index].classList.add('mat-pseudo-checkbox-checked');
document.getElementsByTagName('mat-pseudo-checkbox')[index].setAttribute("ng-reflect-state","checked");

这仅从外观上反映了更改，因为当我尝试通过 (selectionChange)=filter($event) 检索所有选定的复选框时

<mat-select multiple  (selectionChange)="filter($event)" formControlName="dropdown">
   <mat-option *ngFor="let info of infos" [value]="info">
      {{info}}
    </mat-option>
 </mat-select>

如果事件似乎没有选择我们之前尝试设置的值，请​​让我知道事件如何在 mat select 的情况下选择选定的值。

PS：目标是在角度选项卡之间切换时保留多选框