标签: angular-material2

我遇到了Angular2的材质md-select组件的问题,其中FormGroup的值未加载或填充到select中.这是代码......

https://embed.plnkr.co/p7Fm9lC4TxoVaZ8ydYf0/

控件'formal'的值设置为1,但UI显示为没有使用占位符消息填充值.

难道我做错了什么？

是否可以使用角度材料2控制元素的可见性

hide-xx  show-xx hide-gt-xx show-gt-xx

我知道这与angularJS材料有关.
以下代码不起作用:

<md-toolbar color="primary">
  <span>Application Title</span>  
  <span class="example-fill-remaining-space"></span>
  <button md-button hide-xs show-gt-xs>Auto hide button</button>  
</md-toolbar>

我使用https://github.com/angular/material2版本2.0.0-beta1

如果不是,如果没有使用*ngif和屏幕调整大小监听器或其他CSS框架(如Bootstrap),还有其他方法可以做到这一点吗？
也不会https://github.com/angular/flex-layout具有顺便说一下这种可能性？

我有兴趣改变md-sidenav- 从Angular Material 2 - 模式从侧面(桌面)到over(移动).有没有办法以编程方式更改它？谢谢

希望这是一个愚蠢的问题.

我刚刚为我为雇主建造的项目添加了一个md滑块.(因此我没有代码表示抱歉)

我将MdSliderModule导入到我正在使用的模块中.在我想要的模板中添加了标签.它显示出来并且看起来很棒,但不会拖动.我可以点击它来改变它的值,但我无法拖动它.

我错过了什么吗？Angular是否有一个Dragging模块,该组件使用我需要导入的模块？有没有人见过这个？

我们正在使用:

• Angular ^ 4.0.2
• 材料2.0.0-beta.3

任何有关我的尝试的帮助或建议都会有所帮助.提前谢谢您的时间.

我需要添加路由到MdDialog组件,我不知道解决这个问题的最佳方法是什么.

目前,在foo page(www.app.com/foo/1)上,用户可以单击一个按钮,它将打开一个MdDialog组件,bar.

我想要做的是,打开MdDialog后,它会附加/bar/:id到组件上.所以,例如它会是这样的www.app.com/foo/1/bar/1.目标是让用户拥有可以导致foo的可共享链接,然后打开MdDialog.

到目前为止,这就是我的应用程序的结构.

app/
  app.component.html <- <router-outlet> is found here
  app.component.ts
  app.module.ts

  foo/
    foo-routing.module.ts
    foo.component.html
    foo.component.ts
    foo.module.ts

    bar/
      bar.component.html <- This bar component file for the MdDialog
      bar.component.ts

  baz/ <- Another section of the website with it's own routing
    baz-routing.module.ts
    baz.component.html
    baz.component.ts
    baz.module.ts
    ...

目前在我foo-routing.module.ts,我有这个:

const routes: Routes = [
  {
    path: 'foo/:fooId',
    component: FooComponent,
    children: [
      {
        path: 'bar/:barId',
        component: BarDialogComponent
      }
    ]
  }
];

但是,这不起作用.所有这一切都是打开模块,重新路由到/,并且不允许我点击其他链接.

有人有什么建议或想法吗？谢谢!

我在添加值后尝试重置表单.

表单代码片段

<form [formGroup]="addAttributeForm" fxLayout="column">
    <mat-form-field>
      <input matInput formControlName="title" placeholder="Title" required>
      <mat-error>This field is required</mat-error>
    </mat-form-field>
</form>

在组件中

onSubmit(form: FormGroup) {
  // do work
  form.reset();
}

我在观察的内容:

1. 表单值设置为空.
2. 但验证消息仍然显示在mat-error中.
3. 我试过了form.markAsPristine(),form.markAsUntouched()并把这三个结合起来.

如何重置表单以便不显示mat-error？

我在我的应用程序中使用了Angular Material,我有两个mat-table在单个组件上进行排序但我的排序只在第一个表上工作

这是ts代码

@ViewChild(MatSort) inventoryDataSort: MatSort;
@ViewChild(MatPaginator) inventoryDataPaginator: MatPaginator;

@ViewChild(MatSort) additionalDataSort: MatSort;
@ViewChild(MatPaginator) additionalDataPaginator: MatPaginator;
ngAfterViewInit() {
    this.inventoryDataSource.sort = this.inventoryDataSort;
    this.inventoryDataSource.paginator = this.inventoryDataPaginator;
    this.additionalDataSource.sort = this.additionalDataSort;
    this.additionalDataSource.paginator = this.additionalDataPaginator;
}

垫表

<mat-table #table1 [dataSource]="inventoryDataSource" matSort>
<mat-table #table2 [dataSource]="additionalDataSource" matSort>

我使用材质2（角度5）切换了此按钮组

<div class="col-md-4">
    <label>Days of Week</label>
    <mat-button-toggle-group multiple formControlName="days_service" #group="matButtonToggleGroup" >
        <mat-button-toggle [value]="days.value" *ngFor='let days of days_service'>
            {{ days.alias }}
        </mat-button-toggle>
    </mat-button-toggle-group>
</div>

这是我的按钮组

但是，我想将其更改为

我正在尝试以下内容以基于列表索引覆盖有角度的material2 mat-list-item-content样式。

组件HTML：

<div fxLayout="column" fxLayoutAlign="start center" fxFill>
    <mat-list dense class="mat-list">
      <mat-list-item *ngFor="let message of messages" class="{{message.float}}">
         <mat-label>{{message.text}}</mat-label>
      </mat-list-item>
    </mat-list>
</div>

组件CSS

.left .mat-list-item-content {
  float: left;
}

.right .mat-list-item-content {
  float: right;
}

谢谢

我正在使用角垫桌。

我的问题是mat-cell的高度始终为14px（内部内容大小），但是我想修复mat-row的高度：

      <mat-table #table [dataSource]="dataSource">

      <ng-container matColumnDef="NAME">

        <mat-header-cell fxFlex="100%" class="my-mat-header" *matHeaderCellDef> 
          {{'NAME' | translate}} 
        </mat-header-cell>

        <mat-cell fxFlex="100%" class="my-mat-cell" *matCellDef="let element">
          {{ element.name }}
        </mat-cell>

      </ng-container>

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

    .my-mat-row {
       min-height: 100%;
       border-bottom: none;
       padding: 5px 0;
    }

   .my-mat-cell {
     color: black;
     cursor: pointer;
     min-height: 100%;
   }

垫行高度为50像素，而垫单元高度仅为14像素。

如何填充父高？