标签: angular-material-6

组件： https: //material.angular.io/components/snack-bar/examples

我有一个页面是父部分（'#wrapper_container'）。我想在“#wrapper_element”的子元素的中心弹出小吃栏。

谢谢

我有一个垫子扩展面板，我想将其扩展到它下方的元素上，而不是简单地向下移动该元素。我尝试调整 mat-expansion 元素的 z-index 但这不起作用。我在 angular material docs/github 中没有看到任何表明可以这样做的内容。有没有人这样做过或知道如何实现？

任何帮助/提示/建议将不胜感激。

更新： 我想要的解决方案应该与此类似。它可以包含多个元素（垫子选择、日期选择器等。）

我有一个数据集，正在角度材料表中显示（使用角度 6）。已按照此文档链接执行此操作。我一直在寻找一种优化/简洁的方法来将行表示为列，将列表示为行

这是我的html：

<table mat-table [dataSource]="subscriptionPlans" class="mat-elevation-z8 subscription-table text-left">
    <ng-container matColumnDef="subscription">
      <th mat-header-cell *matHeaderCellDef> Subscription </th>
      <td mat-cell *matCellDef="let element"> {{element.name}} </td>
    </ng-container>
    <ng-container matColumnDef="rows">
      <th mat-header-cell *matHeaderCellDef> Rows in million </th>
      <td mat-cell *matCellDef="let element"> {{(element.rowsInMillion) ? element.rowsInMillion : 'custom'}} </td>
    </ng-container>

    <ng-container matColumnDef="price">
      <th mat-header-cell *matHeaderCellDef> Pricing </th>
      <td mat-cell *matCellDef="let element"> {{(element.price) ? element.price : 'custom'}} </td>
    </ng-container>

    <ng-container matColumnDef="additionalPricing">
      <th mat-header-cell *matHeaderCellDef> Pricing for additional 1 million rows </th>
      <td mat-cell *matCellDef="let element"> {{(element.extraPerMillion) …

当前下拉框的宽度大于行的宽度：

有没有办法摆脱多余的宽度？

这是我当前的代码：

的HTML：

<mat-form-field>
    <mat-select disableOptionCentering placeholder="Choose an option">
      <mat-option [value]="option" *ngFor="let option of my_list">
          {{ option }}
      </mat-option>
    </mat-select>
</mat-form-field>

我的清单：

export const my_list: string[] = [ "a", "b", "c", "d"];

style.css：

.mat-select-panel{
    margin-left: 15px;
    margin-top: 28px;
}

这是我的业余爱好项目，由于这个问题它已经被卡住了一段时间。这可能是一个简单的问题，但我对 Angular 和 JS 的了解相当有限。不过我的代码在下面（我已经缩短了一点）并且它在某种程度上起作用了。它从服务器获取数据，然后在客户端显示。那里没有问题，但是现在当我尝试进行客户端过滤时，什么也没有发生。字面上地。我正在输入过滤器输入框，什么也没有。不过滤表行。

我想知道这里有两件事：

1. 我是否使用正确的方法（我可以扩展 MatTableDataSource 吗）？
2. 我做错了什么（如果我可以扩展 MatTableDataSource）？

MyData.ts

export interface MyData {
    id: number;
    description: string;
}

MyData.service.ts

export class MyService {

    constructor(private http: HttpClient) { }

    getData(): Observable<MyData[]> {
        return this.http.get...
    }
}

MyData.datasource.ts

export class MyDataSource extends MatTableDataSource<MyData> {

    private mySubject = new BehaviorSubject<MyData[]>([]);

    constructor(private myService: MyService) { super(); }

    loadData() {
        this.myService.getData()
        .pipe(catchError(() => of([])))
        .subscribe(data => this.mySubject.next(data));
    }

    connect(): BehaviorSubject<myData[]> {
        return this.mySubject;
    }

    disconnect(): void {
        this.mySubject.complete();
    }
}

MyData.component.ts

export …

我在我的组件中使用cdk-virtual-scroll-viewport+cdkVirtualFor并且它似乎工作正常。

然而，在该组件的单元测试中，项目不会被渲染。

我基于此示例制作了一个示例应用程序，虽然该示例在您为该应用程序提供服务时有效，但我编写的测试失败了。

app.module.ts

import { ScrollingModule } from '@angular/cdk/scrolling';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ScrollingModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export …

我试图在用户展开节点时动态加载子节点。

问题是当我填充子数组时，mat-tree 不显示子数组。如果我使用简单的 *ngFor 显示相同的数据，当子数组添加了元素时，它会显示它们。

我这里有一个工作示例：stackblitz example 这是代码和html

ts

    import {NestedTreeControl} from '@angular/cdk/tree';
    import {Component} from '@angular/core';
    import {MatTreeNestedDataSource} from '@angular/material/tree';


    export class PropertyLevel {
       constructor(
        public code : string,
        public hasSubLevels: boolean,
        public subproperties : PropertyLevel[]
       ){}
    }

    @Component({
      selector: 'my-app',
      templateUrl: './app.component.html',
      styleUrls: [ './app.component.css' ]
    })
    export class AppComponent  {
      name = 'Angular';
        nestedTreeControl: NestedTreeControl<PropertyLevel>;
      nestedDataSource: MatTreeNestedDataSource<PropertyLevel>;

    constructor() {
        this.nestedTreeControl = new NestedTreeControl<PropertyLevel>(this._getChildren);
        this.nestedDataSource = new MatTreeNestedDataSource();

     this.nestedDataSource.data = [
      new PropertyLevel( '123', false, []),
      new …

我使用了 Angular Material 表，我从 ts 文件绑定了数据源，但是所有数据都加载在第一页上，分页不起作用。我还有两个表，它们在同一页上，其他表也有同样的问题.

我试过了

setTimeout(() => this.dataSource.paginator = this.paginator);

和

ngAfterViewInit() {
   this.dataSource.paginator = this.paginator
}

HTML：

    <mat-table class="mt-4 table-container" fxFlex="100" [dataSource]="allUsers">
      <ng-container matColumnDef="checked">
        <mat-header-cell fxFlex="10" (click)="selectAllUsers()" *matHeaderCellDef>
          <mat-checkbox [(ngModel)]="checkedAllUsers"></mat-checkbox>
        </mat-header-cell>
        <mat-cell fxFlex="10" *matCellDef="let element">
          <mat-checkbox [(ngModel)]="element.checked"></mat-checkbox>
        </mat-cell>
      </ng-container>

      <ng-container matColumnDef="firstName">
        <mat-header-cell fxFlex="25" *matHeaderCellDef> First Name </mat-header-cell>
        <mat-cell fxFlex="25" *matCellDef="let element"> {{element.firstName}} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="lastName">
        <mat-header-cell fxFlex="25" *matHeaderCellDef> Last Name </mat-header-cell>
        <mat-cell fxFlex="25" *matCellDef="let element"> {{element.lastName}} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="email">
        <mat-header-cell fxFlex="30" *matHeaderCellDef> Email </mat-header-cell>
        <mat-cell …

有没有办法在角度材料中主题组件形状？我知道材料设计有一个形状概念，它允许您为所有小/中/大组件创建更多圆角、更少圆角甚至切角。有没有办法在角材料中实现它？

如果不是，那么在角材料中全局自定义组件的最佳方法是什么？说我想删除 all 上的圆角<mat-button>？

当我的编辑表单加载时，我想用初始值填充表单数组。我的下拉选择选项被禁用，但它没有显示在垫选择中。

let selectedSpecs = this.editData.element.specifications;

this.spec = this.specForm.get('spec') as FormArray;

if (selectedSpecs.length != 0){
  let selectedAttributeIds = [];
  selectedSpecs.forEach((spec, i) => {
    let attribute;
    attribute = {'id': spec.itemDetailId, 'itemId':this.editData.element.itemId, 'name': spec.name};

    this.spec.push(this.formBuilder.group({
      attribute: attribute,
      attributeSpec: spec.description
    }));

    selectedAttributeIds.push(spec.itemDetailId);

  });

  let attributes = [];
  this.selectedCatAttributes.forEach((tempattribute) => {
    let selected;
    if (selectedAttributeIds.includes(tempattribute.id)) {
      selected = true;
    }else {
      selected = false;
    }
    attributes.push(new Attribute(tempattribute, !selected));
  });

  this.attributeList.next(attributes);


}





<div formArrayName="spec" *ngFor="let spec of specForm.get('spec')['controls']; let i= index">
      <div [formGroupName]="i">
        <mat-card class="addShadow">
          <button …