标签: angular-material2

您好我正在使用JHipster 4.0.1

我想将angular 2材料集成到我的home.component中.

我做了:npm install material npm install angular2/{core,button}

 <html><head></head>
<body> 
<md-button>Hello </md-button></body></html>

错误是:md-button不是已知元素

Given the example at https://material.angular.io/components/form-field/overview

<div class="example-container">
  <mat-form-field>
    <input matInput placeholder="Enter your email" [formControl]="email" required>
    <mat-error *ngIf="email.invalid">{{getErrorMessage()}}</mat-error>
  </mat-form-field>
</div>


import {Component} from '@angular/core';
import {FormControl, Validators} from '@angular/forms';

/** @title Form field with error messages */
@Component({
  selector: 'form-field-error-example',
  templateUrl: 'form-field-error-example.html',
  styleUrls: ['form-field-error-example.css']
})
export class FormFieldErrorExample {
  email = new FormControl('', [Validators.required, Validators.email]);

  getErrorMessage() {
    return this.email.hasError('required') ? 'You must enter a value' :
        this.email.hasError('email') ? 'Not a valid email' :
            '';
  }
}

The error seems to be …

我有

<mat-menu #saveMenu="matMenu">...</mat-menu>

在app-save-document companent和

<app-save-document></app-save-document>
<button mat-icon-button [matMenuTriggerFor]="saveMenu">

在另一个companent.

如果我在不同的组件中有[matMenuTriggerFor]的mat-menu和按钮,我可以做些什么来让按钮看到菜单吗？

我现在有 ERROR Error: mat-menu-trigger: must pass in an mat-menu instance.

我正在使用材料组件，我想知道是否可以将下拉选择的大小设置为与mat-form-field的大小完全相同。

默认组件如下：

我想对其进行修改，以使下拉列表的大小与mat-form-field完全相同，如下所示：

但我不知道如何修改下拉容器的宽度和位置，请问如何修改宽度和位置。

这是该组件的一个小示例：

https://stackblitz.com/angular/rllajkqybnmy

我有一个简单的步进器，分为两个步骤。

第一步，有一个带有两个无线电输入的表格。我想通过单击一个单选按钮（没有任何提交按钮）切换到下一步。我正在使用stepper.next()方法来实现这一目标。

问题是-仅在两次单击无线电输入后才切换到下一步。

是否可以通过仅单击一次来切换到下一步？

这是一个有问题的演示https://angular-srtsoi.stackblitz.io

编辑器：https : //stackblitz.com/edit/angular-srtsoi?embed=1&file= app/ stepper-overview-example.ts

我试图使用Material Angular自动完成功能，但遇到了displayWith函数，该函数显然可以用作选择时显示的输出。我想在显示功能中调用自定义功能，例如

displayFn(id) {
 return this.getValue(id)
}
getValue(id) {
 /**return some string
}

对于自动完成

<mat-autocomplete #autoOutlet="matAutocomplete" [displayWith]="displayFn">
  <mat-option *ngFor="let option of outletFilterOptions | async [value]="option.outletId">
   {{ option.outletName }}
  </mat-option>
</mat-autocomplete>

如您所见，我使用id而不是整个对象作为模型。

当显示函数返回未定义this.getValue的错误时，我在Stack Overflow中搜索了一种解决方案，并建议我使用类似的内容[displayWith]="displayFn.bind(this)"。

但不幸的是，这对我也不起作用。我正在使用Angular材质5.1.0。

我有什么想念的吗？

Angular 5材质，材质小吃栏仅对于自定义ErrorHandling无法正确显示，否则工作正常：

我正在尝试使用材质小吃栏显示后端错误，问题是第一次触发时，它出现在错误的位置（不是应该在底部中间，而是在左边），并且永远存在在那里而不会消失（根据我的配置，它应该在2秒后自动消失）

下次出现时，它将正确显示并在2秒钟后消失。

请在此处尝试该问题： 显示我的问题的stackblitz示例。

这里是stackblitz代码

谢谢

我尝试创建一个包含两个dataTables的组件，每个组件都带有另一个dataSource。由于我的原因，我的表格在加载组件后不可见，*ngIf因此我无法使用它，ngAfterViewInit()而使用的是用户在Github上指出的解决方案：

  private paginator: MatPaginator;
  private reportingPaginator: MatPaginator;
  private sort: MatSort;
  private reportingSort: MatSort;

  @ViewChild(MatSort) set matSort(ms: MatSort) {
    this.sort = ms;
    this.reportingSort = ms;
    this.setDataSourceAttributes();
  }

  @ViewChild(MatPaginator) set matPaginator(mp: MatPaginator) {
    this.paginator = mp;
    this.reportingPaginator = mp;
    this.setDataSourceAttributes();
  }

  setDataSourceAttributes() {

      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;

      this.reportingDataSource.paginator = this.reportingPaginator;
      this.reportingDataSource.sort = this.reportingSort;

}

但是我仍然无法正常工作。当两个分页器都包含在中时，我的分页不起作用@ViewChild(MatPaginator)。如果我只包括其中一个

@ViewChild(MatPaginator) set matPaginator(mp: MatPaginator) {
    this.reportingPaginator = mp;
    this.setDataSourceAttributes();
}

要么

@ViewChild(MatPaginator) set matPaginator(mp: MatPaginator) { …

如何验证mat-chip已将添加到中mat-chip-list。我正在使用ReactiveForms。我已经尝试过required验证器。

该值可以是名称列表，因此在提交表单之前，我需要确保名称列表中至少有1个名称。如果列表为空，mat-error则应显示错误消息。使用required验证器会使表单无效，而不管在列表中添加名称如何。

编辑：反应形式

我试图做一个自定义验证器，现在使用的是反应式表单，而不是模板驱动的表单，但是我无法使它正常工作。我编辑了以下代码以反映我的更改，并创建了此https://stackblitz.com/edit/angular-4d5vfj

的HTML

<form [formGroup]="myForm">
  <mat-form-field class="example-chip-list">
    <mat-chip-list #chipList formArrayName="names">
      <mat-chip *ngFor="let name of myForm.get('names').controls; let i=index;"
        [formGroupName]="i"
        [selectable]="selectable"
        [removable]="removable"
        (removed)="remove(myForm, i)">
        <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
      </mat-chip>

       <input placeholder="Names"
          [matChipInputFor]="chipList"
          [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
          [matChipInputAddOnBlur]="addOnBlur"
          (matChipInputTokenEnd)="add($event, asset)">
    </mat-chip-list>
    <mat-error>Atleast 1 name need to be added</mat-error>
  </mat-form-field>
</form>

TS

import {COMMA, ENTER} from '@angular/cdk/keycodes';
import {Component} from '@angular/core';
import {FormGroup, FormControl, FormBuilder, FormArray} from '@angular/forms';
import {MatChipInputEvent} from '@angular/material';

@Component({
  selector: 'chip-list-validation-example', …

我正在尝试实现一个可重排序的列表组，其中包含可以使用@ angular / cdk / drag-drop在列表之间移动的元素，尽管我遇到了一些问题。

我设法分别创建了实现单个拖放的单个示例，尽管将它们放在一起似乎无法并行实现这两个功能。

在组之间移动项目：https : //stackblitz.com/edit/items-move

重新排序群组：https : //stackblitz.com/edit/groups-move

两者在一起：https : //stackblitz.com/edit/groups-items-move

在“ 两个在一起”示例中，似乎拖动单个项目按预期进行，但组的重新排序不起作用，但是，当移到父级之外的第cdkDropListGroup4行上的情况相反，则发生了现在可以重新排序，但随后无法在组之间移动项目。cdk-drag-drop-connected-sorting-group-example.html<cdk-drop-list>

关于我要去哪里的任何指针吗？