小编Edr*_*ric的帖子

当我从树中单击一个节点时，我有一个Angular 2材质树。我需要在该节点上具有选定状态才能更改背景颜色。我不知道该怎么做。我在文档中没有找到任何可以帮助我的东西。这是html代码和一张图片，它看起来应该像树一样

       <mat-tree [dataSource]="dataSource" [treeControl]="treeControl" #matTree [ngStyle]="{ 'color': red}">
        <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle matTreeNodePadding>
          <button mat-icon-button disabled></button>
          {{node.filename}}
        </mat-tree-node>

        <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding >
          <button mat-icon-button matTreeNodeToggle [attr.aria-label]="'toggle ' + node.filename" click="onClick()">
            <mat-icon class="mat-icon-rtl-mirror">
              {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
            </mat-icon>
          </button>
          {{node.filename}}
        </mat-tree-node>
      </mat-tree>

只是尝试将字符串传递到组件输入中，这样我才能拥有一个动态图标。这可能吗？Stackblitz演示

@Component({
  selector: 'app-alert',
  template: `
    <mat-icon class="alert--{{context}}" *ngIf="icon">{{icon}}</mat-icon>
  `,
})
export class AlertComponent implements OnInit {
  @Input() context: string;

  @Input() icon: string;

  @Input() message: string;

  constructor() {}

  ngOnInit() {}
}

<mat-icon>home</mat-icon>
<app-alert [context]="'primary'" [icon]="'check'" [message]="'blah message working'"></app-alert>

我正在尝试添加多个表单字段，我想连续添加 2 个表单字段，但我无法在表单字段之间添加空格（无法分隔下划线）

 <li>
    <mat-form-field>
      <input matInput [(ngModel)]="name" placeholder="What's your name?">
    </mat-form-field>
    <mat-form-field>
      <input matInput [(ngModel)]="name" placeholder="hello">
    </mat-form-field>
  </li>

Stackblitz：https://stackblitz.com/edit/angular-rqczqy

我想在“你叫什么名字”和“你好”之间留有空格

我怎样才能实现这个目标？任何帮助将不胜感激！

我有一个简单的<select>Angular（带材质）如下：

<mat-form-field>
  <mat-label>Type</mat-label>
  <mat-select placeholder="Type" formControlName="type" name="type" id="name">
    <mat-option>None</mat-option>
    <mat-option *ngFor="let t of types" [value]="t">
      {{t}} <-- it is enum -->
    </mat-option>
  </mat-select>
</mat-form-field>

我想在代码的其他部分使用所选类型的索引。

更准确地说：在*ngFor另一个选择中。因此，我不能使用 documentById。

另外，我不想只是为了这样做而安装 jQuery。

是否可以？

漏洞：

Z-Index 不适用于材质对话框

什么是预期行为？

Z-Index 应该在 Material Dialog 上工作，或者 Dialog 应该在其他一切之上。

目前的行为是什么？

材质对话框被下面的选择选项覆盖。

复现的步骤是什么？ https://stackblitz.com/edit/angular-gsa8kr-rkss7t?file=app/dialog-overview-example.html

1. 键入文本。
2. 选择下拉菜单。

截图：https : //postimg.cc/gallery/2i3tc2sbc/

还有其他什么我们需要知道的么？

尝试 CSS 修复：

.modal__content,dialog-layout,mat-dialog-container,.mat-dialog-container,#cdk-overlay-0,.cdk-overlay-pane {
    z-index: 9999 !important;
}

这些都没有奏效。

我正在尝试在我的 Angular 6 应用程序中安装 Material Design。我使用命令添加了导航原理图ng generate @angular/material:nav myNav。当我编译并提供应用程序时，我收到错误消息

未捕获的错误：模板解析错误：'my-nav' 不是已知元素： 1. 如果 'my-nav' 是一个 Angular 组件，则验证它是否是该模块的一部分。

我的 app.modules.ts 代码如下：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { LayoutModule } from '@angular/cdk/layout';
import { MatToolbarModule, MatButtonModule, MatSidenavModule, MatIconModule, MatListModule } from '@angular/material';
import { MyNavComponent } from './my-nav/my-nav.component';

@NgModule({
  declarations: [
    AppComponent,
    MyNavComponent
  ], …

我想在显示来自使用MatSnackBar. （材料模块在应用程序的模块中导入）。

但是，默认的小吃店不支持图标。我如何实现这样的功能？

import { Injectable } from '@angular/core'
import {MatSnackBar} from '@angular/material/snack-bar';
import {MatSnackBarHorizontalPosition, MatSnackBarVerticalPosition} from "@angular/material";


@Injectable()

export class MessagesService {
    horizontalPosition: MatSnackBarHorizontalPosition = 'right';
    verticalPosition: MatSnackBarVerticalPosition = 'top';

    constructor(private snackBar: MatSnackBar) {
    }

    info(message: string) {
        const icon = `<mat-icon>info</mat-icon>`;
        const msg = `${icon} ${message}`;
        this.snackBar.open(msg, 'X', {
            duration: 2000,
            horizontalPosition: this.horizontalPosition,
            verticalPosition: this.verticalPosition,
            panelClass: ['info-message']
        });
    }
}

我有一些 mat-card，它们是 flexbox 项目。我希望卡片本身有点透明opacity: 0.8;。但里面的其余元素保持原样。

所以在我放置的所有其他项目中opacity: 1;，但这没有帮助。

.mat-card {
  opacity: 0.5;
}

首先，非常感谢您的出色工作和社区。

我正在尝试编写一个简单的低聚风格的水材料。

我知道写这种东西有不同的方法，我希望尽可能在 js 脚本中做到这一点（我来自 C# dev'，我对前端还不是很满意）。

在网上编译信息数小时后，我能理解的一种方法是：

var waterVertexShader =  
                "attribute float vertexDisplacement;" +
                "uniform float time;" +
                "varying vec3 vUv;" +
                "void main() {" +
                "   vUv = position;" +
                "   vUv.y += sin(time) * 0.01;" +
                "   gl_Position = projectionMatrix * modelViewMatrix * vec4(vUv, 1.0);"+     
                "}"
            ;

            var waterFragmentShader =

                "void main() {" +
                "gl_FragColor = vec4(0.65, 0.88, 1, 1);" +
                "}";


                },
                flatShading : true,
                vertexShader: waterVertexShader,

这给了我想要的行为的开始，但这不是我的问题。

现在，如果我想继承让我们说 Lambert 或 Phong 材料属性，那么正确的方法是什么？

这听起来很基本，但这是我找到的唯一相关链接： ThreeJS - …

默认情况下，当用户单击标题中的任意位置时，Angular 扩展面板会展开。但是我想更新此功能，以便只有右侧箭头按钮才能触发扩展事件。有人可以帮助我实现这一目标吗？下面是示例代码。 https://stackblitz.com/edit/angular-exp-panel-click

<button (click)="panel1.toggle()" mat-raised-button>Toggle panel 1</button>
<button (click)="panel2.toggle()" mat-raised-button>Toggle panel 2</button>

mat-accordion 外部的按钮可以正确扩展所需的面板，但是在标题内添加相同的按钮时无法按预期工作。