标签: angular-material2

我有一个工作的零食吧,但它只在每个组件上,我想在我的服务上添加它,所以我会打电话给它.这是我的样本component.ts

import { MdSnackBar, MdSnackBarRef } from '@angular/material';
...
export class EmployeeListComponent implements OnInit {
  public toastRef: MdSnackBarRef<any>;
  constructor(private _activatedRoute:ActivatedRoute,private router: Router, private http:PMISHttpService, private toast: MdSnackBar) {

  ngOnInit() {
    this.notify('test');
  }
  ...
  notify (text: string) {
    this.toastRef = this.toast.open(text, null);
    setTimeout(() => {
      this.toastRef.dismiss();
    }, 5000);
  }
  ...
}

我的问题是md-slide-toggle具有正确的值,但它显示错误.

例如:

在开始时,值为1并且切换处于活动状态.

1. 按下切换的时间:值为0但切换仍处于活动状态.

2. 按下切换的时间:值为1但现在切换现在处于非活动状态.

3. ...

请在此处查看:https://plnkr.co/edit/kxehpwaat5dezNActZbn？p =preview

//.html

<md-card>
  <md-slide-toggle ngDefaultControl (click)="onClick()"
     [ngModel]="(device)"></md-slide-toggle>
     {{device}}
</md-card>

//.ts

device:number = 1;

onClick() {
            let tmp;
            if (this.device == 1){
               tmp=0;
            }
            if (this.device == 0){
               tmp=1;
            }
            this.device=tmp;
        }
}

我正在使用Angular w/Angular Material和Flex Layout

我正在尝试为Web应用程序创建一个与此站点完全相同的布局.注意固定标题,固定侧边栏,固定内容的痛苦.没有使用浏览器滚动,只有div滚动并完全适合浏览器视口.

这是我用来给我基本结构的html:

<md-toolbar color="primary">
  <span>Application Title</span>
</md-toolbar>
  <md-sidenav-container>
    <md-sidenav mode="side" opened="true">Drawer content</md-sidenav>
    <div class="my-content">Main content</div>
  </md-sidenav-container>

另外我设置了以下样式:

    html, body {
      margin: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
md-sidenav-container, .main-content {
  margin: 0;
  width: 100%;
  height: 100%;
}

我注意到没有页面上的工具栏,一切都很完美.所以我添加了一个填充底部:64px; 到md-sidenav-container,.main-content类.似乎它修复了内容,但不是sidenav.sidenav滚动条仍然在浏览器窗口下方.

如果有人能告诉我如何使用flex指令,我确实已经安装了flex-layout到我的Angular应用程序.否则,普通的CSS也没关系.

我正在使用角度材料2单选按钮,遵循以下文档:https://material.angular.io/components/component/radio.

我面临的问题是让单选按钮的默认选择值为No.如果您在plunker中看到:https://plnkr.co/edit/jdRxVLdSfFqR4XOdpyUN ？ p = preview,您会发现没有选择任何选项.我希望默认值是No页面加载时.

我想摆脱材料步进器上的标题导航.请建议我该怎么办？我尝试设置以下css但似乎没有工作:

.mat-horizontal-stepper-header-container{display: none}

这是步进器的stackblitz链接. https://stackblitz.com/edit/angular-material2-beta-ybbnhe?file=app%2Fapp.component.html

在一个项目中，我们有多个 Dialog。现在，我想为 DialogOption 设置相同的全局变量。

我发现：https : //material.angular.io/components/dialog/overview 和这段代码：

@NgModule({
  providers: [
    {provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: {hasBackdrop: false}}
  ]
})

我将这些代码与其他代码一起应用，但它不起作用。根本不应用这些设置。

有人让这些设置工作吗？

我正在努力使用Cypress和Angular Material拖放来测试拖放。因此，目标是将“开始工作”从Todo转移到Done。我创建了以下测试，这应该使您可以轻松重现：

您可以在此处玩Stackblitz 。

describe('Trying to implement drag-n-drop', () => {

    before(() => {
        Cypress.config('baseUrl', null);

        cy.viewport(1000, 600);
        cy.visit('https://angular-oxkc7l-zirwfs.stackblitz.io')
        .url().should('contain', 'angular')
        .get('h2').should('contain', 'To do');
    });

    it('Should work, based on this https://stackoverflow.com/a/54119137/3694288', () => {

        const dataTransfer = new DataTransfer;

        cy.get('#cdk-drop-list-0 > :nth-child(1)')
            .trigger('dragstart', { dataTransfer });

        cy.get('#cdk-drop-list-1')
            .trigger('drop', { dataTransfer });

        cy.get('#cdk-drop-list-0 > :nth-child(1)')
            .trigger('dragend');

        cy.get('#cdk-drop-list-1').should('contain', 'Get to work');
    });


    it('Should work, with this library https://github.com/4teamwork/cypress-drag-drop', () => {
        cy.get('#cdk-drop-list-0 > :nth-child(1)')
            .drag('#cdk-drop-list-1');

        cy.get('#cdk-drop-list-1').should('contain', …

我尝试添加rowSpan and colSpan在Angular material Table header。任何人都可以帮助我实现它。

下面是我想使用材料表获得的附加标题

我正试图用茉莉花业力来

ng test

对Angular Materials的所有问题感到惊讶.几个月前我看到OLDER版材料的例子,md-icon而不是mat-icon等等......

因此,这不能解决抛出的错误

MaterialModule.forRoot()

错误

mat-icon不是已知的元素角度材质

我有以下代码

<form #createForm="ngForm">
 <mat-form-field>
   <mat-select placeholder="Favorite food"
      matInput
     [ngModel]
     food="food"
     #food="ngModel" required>
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{ food.viewValue }}
    </mat-option>
   </mat-select>
</mat-form-field>
</form>
<button [disabled]="!createForm.valid">submit</button>

由于我希望"选择"是必填字段,因此在呈现表单时应禁用"提交"按钮.但是,显示表单时会启用"提交"按钮.问题是什么？