标签: angular-material

根据Github的讨论,无法定位标准对话框(api),但可以定位面板对话框(api).

一个简化的演示表明,这是真的:

var position = this._mdPanel.newPanelPosition().bottom(0).right(0);

的角材料文档显示方法,其允许相对于所述点击的元素的定位(或任何传入).但是,我无法让它工作.

var target = el.target;
var position = this._mdPanel.newPanelPosition().relativeTo(target); 

在用于硬值传递.top()和.right(),例如,允许相对于视定位.但是,我无法获得相对于被点击元素的定位.这应该怎么样？

我正在构建一个应用程序,但我想保持一致的颜色方案,可以通过设置更改,所以我使用材料(2)与角度(2 +),但我不知道如何获得不直接的元素的配色方案提供了为它们着色的能力,color="primary"因此我试图弄清楚如何获得我的Material 2主题使用的颜色/颜色方案.我希望它在主题发生变化时进行更改,例如我的导航栏将适应主题更改,因为它设置为

<mat-toolbar color="primary" class="fixed-navbar mat-elevation-z10">

但是材质2中的网格元素并没有采用相同的参数,所以我试图用足够接近的颜色来设置它的样式,或者根本不匹配它(并且它不会适应主题变化),如下所示:

我希望它与主题垫匹配颜色,这是在这里(并在导航栏设置中选择的选项上更改)

@import '~@angular/material/theming';

@include mat-core();



$candy-app-primary: mat-palette($mat-red);
$candy-app-accent:  mat-palette($mat-deep-orange, A200, A100, A400);
$candy-app-warn:    mat-palette($mat-red);
$candy-app-theme: mat-dark-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
.default {
  @include angular-material-theme($candy-app-theme);
}
.light {
  $light-primary: mat-palette($mat-blue, 200,300, 900);
  $light-accent:  mat-palette($mat-light-blue, 600, 100, 800);
  $light-warn:    mat-palette($mat-red, 600);
  $light-theme: mat-dark-theme($light-primary, …

我使用Angular material@5.0.0-rc.2在mat-table中的每一行添加了EDIT,DELETE和DETAILS按钮.所有按钮都正常工作但是,*我收到错误"无法读取未定义的属性'模板'和*每按一次按钮,所有内容都显示在同一页面上

itemlist.component.html

<mat-table #table [dataSource]="dataSource">
  <ng-container matColumnDef="name">
    <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
    <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="description">
    <mat-header-cell *matHeaderCellDef> Description </mat-header-cell>
    <mat-cell *matCellDef="let row"> {{row.description}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="actions">
    <mat-cell *matCellDef="let row">
      <button mat-button (click)="showDetails(row)">DETAILS</button>
      <button mat-button (click)="editItem(row)">EDIT</button>
      <button mat-button (click)="deleteItem(row)">DELETE</button>
    </mat-cell>
  </ng-container>

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

itemlist.component.ts

export class ItemListComponent {
  @Input() dataSource;
  displayedColumns = ['name', 'description', 'actions'];

  @Input() items: Item[];
  @Output() onEdit = new EventEmitter<Item>();
  @Output() onShow = new EventEmitter<Item>();
  @Output() onDelete …

如何从mat-selection-list中选择make single复选框.类似于单选按钮,它从值组中接受一个值.

我正在使用Angular Material 5.2.5中的MatTable.我试图用通过服务器请求获得的数据填充表.

用户界面

  <mat-table [dataSource]="dataSource">
    <ng-container matColumnDef="number">
      <mat-header-cell *matHeaderCellDef>#</mat-header-cell>
      <mat-cell *matCellDef="let i = index">{{i + 1}}</mat-cell>
    </ng-container>
    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
      <mat-cell *matCellDef="let user">{{user.userName}}</mat-cell>
    </ng-container>
    ...
  </mat-table>

组件代码

  public dataSource = new MatTableDataSource<User>()
  public displayedColumns = ['number', 'name', 'email', 'phone', 'joiningDate']

在从服务器接收数据时向dataSource添加数据

 onGettingPartnerUsers(userList: User[]) {
  console.log('userList', userList)
  if (!Util.isFilledArray(userList)) {
    // TODO show message no user found
  } else {
    this.dataSource.data = userList
  }
 }

我正在获取用户列表.但是这个错误正在被抛出.

Error: Missing definitions for header and row, cannot determine which columns should be …

node_modules/@angular/material/button-toggle/typings/button-toggle.d.ts(136,20)中的错误:

错误TS2315:类型'ElementRef'不是通用的.

node_modules/@angular/material/button-toggle/typings/button-toggle.d.ts(154104):

错误TS2315:类型'ElementRef'不是通用的

我正在尝试安装材料,但看起来这是错误的.

数据:

Angular CLI: 1.7.4
Node: 9.11.1

我在我的项目中使用角度材质,我使用Mat-Table为每个表渲染1000个产品/行.当表格改为分页(我们使用后端分页)到1000行时,性能变得非常慢,我甚至无法在文本框中写入.

我试图调试问题,所以我把日志放在一个列模板上,这样我就可以看到渲染是如何工作的.

即使我将鼠标悬停在表格标题上,我也看到它会重新呈现所有行.是否有可能将变更检测控制为ChangeDetectionStrategy.OnPush

我正在使用 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 …

我正在使用角材料 8.2.3，当我尝试设置芯片时，颜色芯片仍然是灰色的

<mat-chip-list>
    <mat-chip color="accent" removable (removed)="removeFilter()">
        Filter view on {{dateFrom | date:'yyyy:MM:dd'}}
        <mat-icon matChipRemove>cancel</mat-icon>
    </mat-chip>
</mat-chip-list>

我已经尝试了所有颜色（警告、原色等），但芯片的颜色仍然是灰色的。有谁知道为什么？

我使用 CDK Material Drag and Drop 实用程序创建一个启用拖放功能的表单编辑器。

它工作正常，但cdkDropList在 a 中嵌套 acdkDropListGroup不起作用。我无法将任何内容拖到嵌套的下拉列表容器中。

<div class="container">
  <div class="row" cdkDropListGroup>
    <div class="col-2">
      <div id="toolbox" cdkDropList>
        ...
      </div>
    </div>
    <div class="col-10">
      <div id="formContainer" cdkDropList>
        ...
        <div class="row">
          <div class="col-md-6" cdkDropList>
            ... column 1 content
          </div>
          <div class="col-md-6" cdkDropList>
            ... column 1 content
          </div>
        </div>
      </div>
    </div>
  </div>
</div>