标签: angular-material2

Angular Material (CDK) 中的Portal模块是一种非常强大的将动态内容渲染到“PortalOutlet”的方式。

APortal<T>可以是 TemplateRef，其中T是上下文数据的类型。

<ng-template cdkPortal let-data>
    <p>Portal contents {{ data | json }}</p>
</ng-template>

你得到一个参考 @ViewChild

@ViewChild(CdkPortal) myPortalRef: CdkPortal;  

您可以在 cdkPortalOutlet

Content gets inserted here: 
<ng-template [cdkPortalOutlet]="myPortalRef"></ng-template>

这会将门户内容插入出口。

但是提供的指令有两个重要的缺失功能。

1) no way to set the actual context object on the outlet using the directive
2) no way to set the context object on the portal itself

您可以手动创建门户并提供上下文，或者使用上下文以编程方式将门户附加到 PortalOutlet，但我想以声明方式进行。

类似的（并且更常用）[NgTemplateOutlet]确实为 提供了一个属性[ngTemplateOutletContext]。

在 CdkPortal 上设置上下文的最佳方法是什么？我应该自己扩展指令，还是尝试通过服务传递我的数据？我认为这个模块的重点是让事情变得超级简单。

角源

另见：https : …

我正在使用角材料选项卡，我想使用指令动态隐藏选项卡元素。

html模板

<mat-tab-group>
  <!-- how to hide this using directive? -->
  <mat-tab appHideMe label="First"> Content 1 </mat-tab>
  <!-- like this -->
  <mat-tab *ngIf="false" label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

<div appHideMe>
  hidden
</div>
<div>
  visible
</div>

HideMe 指示

<mat-tab-group>
  <!-- how to hide this using directive? -->
  <mat-tab appHideMe label="First"> Content 1 </mat-tab>
  <!-- like this -->
  <mat-tab *ngIf="false" label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

<div appHideMe>
  hidden
</div>
<div>
  visible
</div> …

如何在 Angular Material Autocomplete 中测试事件？我正在尝试测试此代码，并想知道如何将event参数传递给该方法：

onOptionSelect(event: MatAutocompleteSelectedEvent) {
  this.selectedOption = event.option.value;
}

编辑：为了澄清，我想知道如何模拟类型的事件，MatAutocompleteSelectedEvent以便我可以在测试中将其传递给我的方法。

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

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

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

Stackblitz：https ://stackblitz.com/angular/nvpdgegebrol

这实际上是官方的 Angular Material 示例分叉并更改了逻辑以显示针对 minLength 验证而不是电子邮件的 mat 错误。

它适用于必需的验证和电子邮件验证，并且消息显示并且一切正常，但是 minLength *ngIf 根本不显示。

代码：

HTML：

<mat-error *ngIf="emailFormControl.hasError('minLength') && !emailFormControl.hasError('required')">
  Please enter a valid email address
</mat-error>

TS：

emailFormControl = new FormControl('', [
  Validators.required,
  Validators.minLength(10),
]);

还有`ErrorstateMatcher，但它是样板文件并且有效。

• Angular 6+
• Angular Material 6+

mat-grid-tile与其他瓷砖相比，我希望单个具有较低的高度。试图通过设置[rowspan]=".3"属性来做到这一点。它确实使 tile 和它的内容高度变小了，但是这个“较小”的 tile 和下一个 tile 之间的空间仍然好像 tile 有[rowspan]="1". 设置下一个瓷砖[rowspan]=".7"并不能解决它 - 它们仍然是全高行的相同空间。

  <mat-grid-list [cols]="6" rowHeight="16rem">
    <mat-grid-tile [colspan]="2" [rowspan]="1">
      <mat-card class="dashboard-card">
         something
      </mat-card>
    </mat-grid-tile>
    <mat-grid-tile [colspan]="4" [rowspan]="1">
      <mat-card class="dashboard-card">
         something
      </mat-card>
    </mat-grid-tile>
    <mat-grid-tile [colspan]="6" [rowspan]=".3">
      <mat-card class="dashboard-card">
         something
      </mat-card>
    </mat-grid-tile>
    <mat-grid-tile [colspan]="6" [rowspan]="1">
      <mat-card class="dashboard-card">
         something
      </mat-card>
    </mat-grid-tile>
  </mat-grid-list> 

.dashboard-card {
  width: calc(100% - 60px);
  height: calc(100% - 60px);
}

这样做的正确方法是什么/如何解决上述问题？

这是我的业余爱好项目，由于这个问题它已经被卡住了一段时间。这可能是一个简单的问题，但我对 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 …

这是我的表单组。我在另一个表单组中使用表单组：

this.shopGroup = this.fb.group({
  _user: [''],
  name: ['', Validators.compose([Validators.required, Validators.maxLength(60)])],
  url_name: [''],
  desc: ['', Validators.compose([Validators.required, Validators.maxLength(600)])],
  photos: [''],
  currency: ['Real'],
  language: ['Português do Brasil'],
  address: this.fb.group({
    zipcode: ['', Validators.compose([Validators.required, Validators.pattern('[0-9]{5}[\-]?[0-9]{3}')])],
    street: ['', Validators.compose([Validators.required, Validators.maxLength(70)])],
    number: [null, Validators.compose([Validators.required, Validators.max(99999)])],
    complement: ['', Validators.maxLength(30)],
    district: ['', Validators.compose([Validators.required, Validators.maxLength(60)])],
    state: ['', Validators.required],
    city: ['', Validators.compose([Validators.required, Validators.maxLength(70)])]
  }),
  status: [true],
  created_at: [new Date()],
  updated_at: [new Date()]
});

这是模板：

<form [formGroup]="shopGroup">
  <mat-horizontal-stepper [linear]="isLinear" #stepper>
    // Im not sure how to set stepControl
    <mat-step [stepControl]="?">
        <ng-template matStepLabel>Store …

我正在使用 Angular 7 中的新控件，但似乎无法让它识别出我向正在显示的数组中添加了一个新项目。

这是我的 html：

<cdk-virtual-scroll-viewport class="list-container lg" [itemSize]="52.5">
    <div *cdkVirtualFor="let state of statesObservable | async;" class="list-group-item">
        <div class="state">{{state.name}}</div>
        <div class="capital">{{state.capital}}</div>
    </div>
</cdk-virtual-scroll-viewport>

这是组件的设置：

import { Component, OnInit } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

@Component({
  selector: 'app-virtual-scroll',
  templateUrl: './virtual-scroll.component.html',
  styleUrls: ['./virtual-scroll.component.css']
})
export class VirtualScrollComponent {

  states = [
    { name: 'Alabama', capital: 'Montgomery' },
    { name: 'Alaska', capital: 'Juneau' },
  ];
  statesObservable = new BehaviorSubject(this.states);

  sortBy(prop: 'name' | 'capital') {

    // this works -- creates …

我正在 angular 6 中创建一个应用程序（我计划将它迁移到 ng7），并且在其中一个组件中需要添加 2 个元素，ng 材料的 textarea 和我的自定义组件。每个都应占可用高度的 50%。我对 textarea 有问题，因为生成的 mat-form-field-wrapper 只占用它需要的空间，我无法在该元素中实现我的目标（我不想使用任何 ::ng-deep 解决方案作为不推荐）

这是我到目前为止所做的（当然是样本）：

<form [formGroup]="myGroup" fxLayout="column" fxLayoutAlign="center stretch" fxFlex="1 1 100%">
  <mat-form-field fxFlex="1 1 100%" fxLayout="column" fxLayoutAlign="start stretch">
    <textarea matInput formControlName="myControl" fxFlex="1 1 100%"></textarea>
  </mat-form-field>
</form>

<my-custom-component *ngIf="somevariable" [variable]="somevariable"></my-custom-component>