标签: angular-material

我正在使用 Angular 材质对话框的 Angular 6 应用程序

• 我试图在我的数据成功发送到服务器后成功关闭对话框，

我用过 this.dialogRef.close(0); 或 this.dialogRef.close(0); 或 this.dialogRef.close(); 但它仍然不起作用

我把我的代码放在下面

组件1.ts

let NewRegDialog = this.dialog.open(NewRegistrationComponent, {

  width: '750px',
  height: '500px',
  //disableClose: true,
  data: {
    email : email,
    regType : regType,
  },
});

NewRegDialog.afterClosed().subscribe(result => {

  if(result == 1){
    this.dialogRef.close('signup');
  }else{
    alert('Login failed') ;
    });

组件2.ts

    import { Component, OnInit , Inject } from '@angular/core';
    import {  MatDialog  , MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';


   ... .. 
   .. .. 

      constructor( private restapi: ServicesService , private dialog: MatDialog …

我没有做任何太特别的事情.

我有一个输入,我希望每次击键都有效.如果验证失败,则显示错误.不要等待模糊事件触发$ touch.

我认为这是默认情况,但显然不是.我使用角度材料和角度消息.我正在为封锁检测这样做.

标记:

<form name="primaryLogin" novalidate>
    <md-content layout-padding layout="column">
        <md-input-container flex>
            <label>Login ID</label>
            <input type="text" required="" name="login" ng-model="primary.loginID" capslock>

            <div ng-messages="primaryLogin.$error">
                <div ng-message="required">
                    Please enter a Login ID.
                </div>

                <div ng-message="capslock">
                    Caps Lock is ON!
                </div>
            </div>

            <pre>{{ primaryLogin | json }}</pre>

        </md-input-container>

    </md-content>
</form>

当我第一次来到页面,打开大写锁定,并开始输入,我的错误消息如下所示:

{
  "$error": {
    "capslock": [
      {
        "$viewValue": "Q",
        "$validators": {},
        "$asyncValidators": {},
        "$parsers": [
          null
        ],
        "$formatters": [
          null,
          null
        ],
        "$viewChangeListeners": [],
        "$untouched": false,
        "$touched": true,
        "$pristine": false,
        "$dirty": true,
        "$valid": …

我试图了解如何最好地使用Angular-material主题:

谷歌提供各种调色板,并提供如何在调色板之间轻松切换的指南.

我已经看到了这个问题,并找到了一堆工具来生成一个主色调的工具(tool1,tool2)

虽然从设计师那里获得定制设计时,选择了不同的颜色,我发现很难将设计颜色作为一个完整的主题来实现,因为有太多的变量需要考虑(如悬停阴影,墨水波纹阴影等).

我的问题是:

1. 作为开发人员,我可以从每个设计中创建一个足够令人愉悦的主题(通过JS主题或CSS覆盖),还是有任何限制要考虑？

2. 设计师在创建设计时是否应该考虑一些指导原则？

3. 我们是否应该通过使用Google预定义的调色板来放弃设计的灵活性？

**

编辑 - 05/2017:

我决定完全关闭主题,因为我无法完全理解如何根据我们的需求定制它.

我现在通过webpack将变量注入到SASS文件中,并且outcode更加清晰.

**

如何在mat表中添加自定义列.

例如,添加包含编辑图标的编辑列,其中包含包含当前元素的id的click事件.

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

    <!--- Note that these columns can be defined in any order.
          The actual rendered columns are set as a property on the row definition" -->

    <!-- Position Column -->
    <ng-container matColumnDef="position">
      <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
    </ng-container>

    <!-- Weight Column -->
    <ng-container matColumnDef="weight">
      <mat-header-cell *matHeaderCellDef> Weight </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell> …

我正在使用角度和角度材料的新版本.我需要获取datepicker用户更改日期时的值,然后将该值传递给函数并执行某些操作.

日期选择器

  <mat-form-field>
    <input matInput [matDatepicker]="picker" placeholder="Choose a date" [(ngModel)]="roomsFilter.date">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker [(ngModel)]="roomsFilter.date" ngDefaultControl (selectedChanged)="onChange($event)"></mat-datepicker>
  </mat-form-field>

这个功能.

  public onChange(event: any, newDate: any): void {
    console.log(event.target.value);
    // this.getData(newDate);
  }

我正在尝试使用材质角度复选框,并将其默认设置为已选中,但它显示为未选中,有什么问题？

<mat-checkbox class = "example-margin" [(ngModel)] = obj.impresora> 
     <label>Printer</label> 
</mat-checkbox>

obj.impresora属性是布尔值

我一直在阅读一些关于此的文章,但它们似乎在几种不同的方式上存在冲突.我希望重新创建与最新版角度材料[5.0.0-rc0] 的角度材料文档站点相同的主题切换

我有两个自定义主题,这是custom-theme.scss,并且有light-custom-theme.scss几乎相同,没有mat-dark-theme

@import '~@angular/material/theming';
$custom-theme-primary: mat-palette($mat-blue);
$custom-theme-accent: mat-palette($mat-orange, A200, A100, A400);
$custom-theme-warn: mat-palette($mat-red);
$custom-theme: mat-dark-theme($custom-theme-primary, $custom-theme-accent, $custom-theme-warn);

@include angular-material-theme($custom-theme);

我的styles.scss看起来像这样

@import '~@angular/material/theming';
@include mat-core();
@import 'custom-theme.scss';
@import 'light-custom-theme.scss';
.custom-theme {
  @include angular-material-theme($custom-theme);
}

.light-custom-theme {
  @include angular-material-theme($light-custom-theme);
}

然后在index.html中调用它 <body class="mat-app-background">

当我做一个主题时,一切正常.但我试图在两者之间切换.将两个主题添加到angular-cli.json中,light-custom-theme接管

"styles": [
  "styles.scss",
  "custom-theme.scss",
  "light-custom-theme.scss"
],

我在我的一个组件中有以下代码来处理切换主题

toggleTheme(): void {
  if (this.overlay.classList.contains("custom-theme")) {
    this.overlay.classList.remove("custom-theme");
    this.overlay.classList.add("light-custom-theme");
  } else if (this.overlay.classList.contains("light-custom-theme")) {
    this.overlay.classList.remove("light-custom-theme");
    this.overlay.classList.add("custom-theme");
  } else {
    this.overlay.classList.add("light-custom-theme");
  }
}

但无论何时运行,主题都保持不变.对于它的价值,在overlay.classList中的位置0处已经存在"cdk-overlay-container"对象

0:"cdk-overlay-container"
1:"custom-theme"
length:2
value:"cdk-overlay-container custom-theme" 

我不确定如何调试这个,因为角度材料文档没有给我太多的工作,任何帮助将是赞赏! …

我想利用MatSnackBar在事件完成时显示通知.我在我的app模块中导入了MatSnackBar,下面是我的app.module.ts

...
import { MatSnackBar,
    MatSnackBarConfig, ...
} from '@angular/material';
...

@NgModule({
    declarations: [...],
    imports: [MatSnackBar, MatSnackBarConfig, ...],
    providers: [...],
    bootstrap: [...],
    entryComponents: [...]
})
export class AppModule {
}

下面是我的package.json:

{
    "@angular/animations": "^5.1.0",
    "@angular/cdk": "^5.0.0",
    "@angular/cli": "^1.6.1",
    "@angular/common": "^5.1.0",
    "@angular/compiler": "^5.1.0",
    "@angular/compiler-cli": "^5.1.0",
    "@angular/core": "^5.1.0",
    "@angular/forms": "^5.1.0",
    "@angular/http": "^5.1.0",
    "@angular/language-service": "^5.1.0",
    "@angular/material": "^5.0.0",
    "@angular/platform-browser": "^5.1.0",
    "@angular/platform-browser-dynamic": "^5.1.0",
    "@angular/router": "^5.1.0",
    "@swimlane/ngx-charts": "^7.0.1",
    "@types/jasmine": "^2.8.2",
    "@types/jasminewd2": "^2.0.3",
    "@types/node": "^8.0.56",
    "angular2-datatable": "^0.6.0",
    "core-js": "^2.5.1",
    "d3": "^4.10.0",
    "ng-http-loader": "^0.2.0",
    "ng2-charts": "^1.6.0",
    "ng2-handsontable": "^1.0.3", …

我正在使用mat-table.它有一个过滤器,可以正常使用doc示例:

从https://material.angular.io/components/table/overview,原始代码是:

    <div class="example-header">
       <mat-form-field>
         <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
       </mat-form-field>
   </div>

   <mat-table #table [dataSource]="dataSource">
      <!-- the rest of the code -->
   </mat-table>

    export class TableFilteringExample {
     displayedColumns = ['position', 'name', 'weight', 'symbol'];
     dataSource = new MatTableDataSource(ELEMENT_DATA);

     applyFilter(filterValue: string) {
       filterValue = filterValue.trim(); // Remove whitespace
       filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
       this.dataSource.filter = filterValue;
     }
    }
    const ELEMENT_DATA: Element[] = [
     {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
     {position: 2, name: 'Helium', weight: 4.0026, …

我怎样才能改变高度mat-form-field与appearance="outline"？

我需要减少垫形场。

我的输入示例