标签: angular-material2

flex-layout 不会在宿主元素上应用内联样式，其中宿主元素通过 @HostBinding 获取它们的 flex-layout 属性

@Component({
    selector: 'column-node',  //flex-layout not working on host elements
    host: { '[@visibility]': 'visibility' },
    template: `<ng-content></ng-content>`,
})    

export class LayoutColumnNodeComponent {
    @HostBinding('attr.fxLayout') fxlayout = 'column';
}

fxLayout属性已添加到 DOM 中，<column-node fxLayout="column">但未应用 flex-layout 内联样式。

不能<column-node>在您的html所有自定义选择器中使用独立选择器，无论页面中有多少需要内联 flex 属性标记。

<column-node fxLayout="row" fxLayoutAling="start start" fxFlex.xs="100" fxFlex.sm="50" fxFlex.md="33" fxFlex.lg="33" fxFlex="25"> 使用所有这些 flex 标记扫描此代码将非常困难....

我有一个问题，sidenav 和 header 是共享服务的不同组件。这在检查 sidenav 元素时似乎有效，我可以看到打开和关闭的切换。我遇到的问题是实际上没有 sidenav 出现。

组件文件：

import { Component, OnInit, ViewChild } from '@angular/core';

import { MdSidenav } from '@angular/material';

import { SidenavToggleService } from './shared/sidenavToggle.service';

@Component({
  selector: 'app-sidenav',
  templateUrl: './sidenav.component.html',
  styleUrls: ['./sidenav.component.css']
})
export class SidenavComponent implements OnInit {
  @ViewChild('sidenav') sidenav: MdSidenav;

  /**
   * Constructor of the class.
   * @param {sidenavService} SidenavToggleService
   */
  constructor(public sidenavService: SidenavToggleService) {}

  /**
   * OnInit life cycle hook
   */
  public ngOnInit(): void {
    this.sidenavService.setSidenav(this.sidenav);
  }

}

html文件：

<md-sidenav-container>
  <md-sidenav …

我在自动完成材料 2 时遇到问题。

就我而言，当用户在输入中写下某些内容时，我会填充列表，但带有选项的 div（面板）始终显示在下方（如果屏幕很小，我必须向下滚动页面）。当屏幕较小时，它应该出现在输入字段上方。

我认为问题在于面板的位置仅在单击输入时初始化。任何人都可以帮助我解决任何问题？有没有办法在列表更新时重置 positionY？

谢谢

我在使用 Angular Flex Layout 对齐项目时遇到问题。

下面的 snipper 没有<md-icon>与标题的右侧对齐，这正是我想要它做的。

关于如何实现这一点的任何建议？

<div class="flex-item" fxFlex fxFlexAlign="end end">

<md-card style="background-color:white;">
   <md-card-header style="background-color:white;">
      <md-card-title>Swap Card</md-card-title>
      <div class="flex-item" fxFlex fxFlexAlign="end end">
         <md-icon>add_a_photo</md-icon>
         Icon
      </div>
   </md-card-header>
   <md-card-content>
   </md-card-content>
</md-card>

我想为 md-tab 自定义活动颜色。

chrome dev 控制台中的类显示 ==> -mat-tab-label mat-ripple mat-tab-label-active。但没有任何边界底部。有一个我试图改变的人字形类，但没有效果。

我几乎在所有课程中都尝试过 /deep/。努力工作。还检查了 md-tab-header，但在任何地方都看不到那种颜色！任何帮助，将不胜感激 ：）

尝试使用 ngrx 存储为 angular2 材料表制作数据源。https://material.angular.io/components/table/examples在排序示例中，当排序或数据发生变化时，它们直接访问 _exampleDatabase 数据。使用 ngrx 无法直接访问数据，因此我尝试使用 rxjs 运算符对数据进行排序。

export class ExampleDataSource extends DataSource<any> {
    constructor(private _sort: MdSort, private _storeData$: Observable<UserData[]>) {}

    connect(): Observable<UserData[]> {
        return Observable.combineLatest(this._storeData$, this._sort.mdSortChanage, 
            (data, sort) => {
                 // sorting logic here
                 return data;
            })
    }

一旦我更改排序顺序或调度新事件以更改商店中的用户数据，这就会正常工作。我需要从每个人那里获取初始数据来显示。是否有我缺少的 rxjs 运算符来实现这一点？或者对于这种情况还有另一种更好的方法。

我曾尝试使用 withLatestFrom 和 startWith 但都没有成功。

谢谢！

编辑：在 main.ts 上添加了一个显示问题http://plnkr.co/edit/5HOJSKKmdCuns2kvSirS?p=preview的 plunkr。从 combineLatest 调用中删除 eventEmitter 时，将打印预期的消息。由于 mdSort 在单击之前不会发出事件，因此这可能会导致我的问题。

Edit2：有关解决方案，请参阅下面的谢尔盖评论。工作 plunkr 也在评论中，因为我的声誉不够高，无法发布 2 个链接。由于事件发射器没有输出至少一个值，我需要在事件发射器上添加 startWith 并且它起作用了。

我正在寻找此布局的 Angular 2/4 示例。我需要从两列卡片开始（左列 2 个，右列 1 个）。但是，如果屏幕很小，它们应该折叠为一列。我可以在带有 div 的 CSS 中做到这一点，但是在 Material 2 中必须有一个简单的方法——有很多 Material 1 示例。

这段代码改编自 Angular Material 1 的答案，但它不起作用（我将“行”更改为“列”希望能起作用，但我只得到一列包含三张卡片的内容）：

如何创建带有角材料的卡片网格？

<div class='md-padding' layout="column" layout-wrap>
    <md-card flex="40" flex-sm="80">
      <md-card-content>
        <h2>Left Card 1</h2>
      </md-card-content>
    </md-card>

    <md-card flex="40" flex-sm="80">
      <md-card-content>
        <h2>Left Card 2</h2>
      </md-card-content> 
    </md-card>
</div>

<div class='md-padding' layout="column" layout-wrap>
    <md-card flex="40" flex-sm="80">
      <md-card-content>
        <h2>Right Column </h2>
      </md-card-content>
    </md-card>
</div>

来自答案：“在此示例中，您将有两张卡片（每张 40%），当屏幕调整为 -sm 时，卡片将位于 80%。”

我在用什么

• 角
• 角材料 ^2.0.0-beta.12

我在做什么

• 我刚刚开始了一个新项目并安装了材料

• 从以前的项目复制某些语法时，尝试导入时出现错误

'从'@angular/material'导入{MdInputModule}；

• 在深入研究打字后，它看起来好像现在已更改为“MatInputModule”
• 我已经更新了我的模块以使用“MatInputModule”
• 现在 HTML 抛出错误

'md-form-field' 不是已知元素：

• 这是使用材料网站提供的语法

HTML

<form [formGroup]="albumEdit">
  <md-form-field>
    <input mdInput formControlName="albumTitle" placeholder="Album Title">
  </md-form-field>
</form> 

问题

1. 我在这里遗漏了一些明显的东西吗？
2. 在最新版本中实现材料组件的最佳方法是什么？
3. 是否有一些我遗漏的官方文件？

我尝试在此处跟进有关如何设置角度材料步进器的步骤：https : //material.angular.io/components/stepper/overview

我想要一个包含多个步骤的简单表单，所以我创建了这个：

<form [formGroup]="formGroup">
  <mat-horizontal-stepper formArrayName="formArray" linear>
    <mat-step formGroupName="0" [stepControl]="formArray.get([0])">
      <div>
        <button mat-button matStepperNext type="button">Next</button>
      </div>
    </mat-step>
    <mat-step formGroupName="1" [stepControl]="formArray.get([1])">
      <div>
        <button mat-button matStepperPrevious type="button">Back</button>
        <button mat-button matStepperNext type="button">Next</button>
      </div>
    </mat-step>
  </mat-horizontal-stepper>
</form>

我进入我的控制台：

ERROR Error: Cannot find control with name: 'formArray'
    at _throwError (forms.es5.js:1918)
    at setUpFormContainer (forms.es5.js:1891)
    at FormGroupDirective.webpackJsonp.../../../forms/@angular/forms.es5.js.FormGroupDirective.addFormArray (forms.es5.js:4849)
    at FormArrayName.webpackJsonp.../../../forms/@angular/forms.es5.js.FormArrayName.ngOnInit (forms.es5.js:5134)
    at checkAndUpdateDirectiveInline (core.es5.js:10856)
    at checkAndUpdateNodeInline (core.es5.js:12364)
    at checkAndUpdateNode (core.es5.js:12303)
    at debugCheckAndUpdateNode (core.es5.js:13167)
    at debugCheckDirectivesFn (core.es5.js:13108)
    at Object.eval [as updateDirectives] (MystepperComponent.htm

我的测试的完整源代码在这里：github上的angular stepper …

我不知道如何检测 mat-sidenav-container 何时在角材料 2 中滚动。

当用户滚动时，我想在我的组件上调用一个方法。但是，当使用 sidenav-container 时，不再在窗口上触发滚动事件。

而是<mat-sidenav-content cdkscrollable></mat-sidenav-content>添加了一个额外的元素，这就是滚动条所在的位置。如果无法直接访问该组件以在其上放置(scroll)="myMethod()"事件侦听器，如何检测该组件上何时发生滚动。

有任何想法吗？