我正在使用 Angular 5 和 AngularMaterial2。
当我尝试注入 MediaMatcher 服务时出现错误。
我有两个模块。用于应用程序引导程序的根模块，以及包含所有组件的主模块。我正在尝试使用响应式侧导航作为角度材料文档的示例。
我想我缺少导入，但我找不到模块是什么。
这是我的代码：
应用模块：
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
//Angular Module Dependencies
import { HttpClientModule } from '@angular/common/http';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
//Root Module Imports
import { AppComponent } from './app.component';
//Feature Module Imports
import { AppRoutingModule } from './app-routing.module';
import { CoreModule } from "./core-module/core.module";
import { MainModule } from './main-module/main.module';
import { FrontSession } from …使用 Ajax 从后端获取值后，排序和分页不起作用。
我正在使用以下版本：
角度：5.2.7 材料：5.2.4 打字稿：2.5.3
我的代码片段：
<div class="form-created-by-me-header">
<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>
</div>
<div class="form-created-by-me-container mat-elevation-z8">
<mat-table [dataSource]="dataSource" matSort>
<!-- ID Column -->
<ng-container matColumnDef="id">
<mat-header-cell *matHeaderCellDef mat-sort-header> ID </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.id}} </mat-cell>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;">
</mat-row>
</mat-table>
<mat-paginator [pageSizeOptions]="[1, 5, 10, 25, 100]"></mat-paginator>
export class FormCreatedByMeComponent {
cratedFormsByMe: Array<SurveyForm>;
dataSource: MatTableDataSource<SurveyForm> …我有一个 Angular 5 应用程序，它必须mat-select在 Bootstrap 模态中使用 Angular Material 。问题是下拉选项出现在模态后面。我的代码如下所示：
<mat-form-field class="mdb-form-field form-adjustments">
<mat-select placeholder="What fruit are you looking for?" [formControl]="fruitType" [(ngModel)]="defaultFruitType">
<mat-option *ngFor="let fruitType of fruitTypes" [value]="fruitType">{{ fruitType }}
</mat-option>
</mat-select>
</mat-form-field>
我知道我应该使用z-index将 Angular Material 的选择选项带到前面。但问题是上什么课？我尝试将其应用于 Angular Material 的多个类，但无济于事。以下所有方法都失败了：
body div.cdk-overlay-container {
z-index: 99999;
}
/deep/ .cdk-overlay-pane {
z-index: 99999 !important;
}
/deep/ .cdk-global-overlay-wrapper, .cdk-overlay-container {
z-index: 99999 !important;
}
.mat-select-menu-container {
z-index: 99999 !important;
}
.mat-dialog-container {
z-index: 99999;
}
/deep/ .mat-select-panel {
z-index: 99999 …有很多关于这个主题的问题，特别是关于扩展行。但是，我所看到的所有实现都是通过使用类似表格的手风琴/面板（需要做更多的事情来适应分页和排序），使用 when 谓词（在尝试使用分页时似乎有问题）来完成的，或者似乎理想的解决方案是将指令附加到 mat-row 元素。
最后一个解决方案非常接近我需要做的事情。基本上，如果您单击行上的任意位置，它将展开。请参阅此示例。但是，就我而言，在其中一列中，我有一个链接，用户可以单击该链接以查看在另一个选项卡中打开的其他一些信息。因此，当您单击该链接时，它将打开它并展开该行。
对我来说，它可以，但是，对于我们的客户来说，它不是，我能看到的最好的解决方法是在单击具有加号图标的列时展开行。只在那个图标点击上扩展是理想的，但现在是小步子。
有没有人遇到过类似的情况并有某种解决方案？只是想被放在正确的方向。到目前为止，我已经完成了附加的 stackblitz 中的所有内容，并且效果很好。只需要最后一步让客户满意！
我试图让 MAT-SELECTION-LIST 在反应式表单中工作，制作一个清单组，使用 FormBuilder 创建一个包含相关 FormControl 的 FormGroup。本能地，我只想有一个像这样的简单控件：
this.clientForm= this.fb.group( {
myOtherControl: [[]]
})
并像这样使用它：
<form [formGroup]="clientForm">
<h1>
FormGroup Value
</h1>
<pre>
{{ clientForm.get('myOtherControl').value | json }}
</pre>
<mat-selection-list id='2' formControlname="myOtherControl">
<mat-list-option value="SOMETHING3">
SOMETHING3
</mat-list-option>
<mat-list-option value="SOMETHING4">
SOMETHING4
</mat-list-option>
</mat-selection-list>
</form>
问题是我无法用它来注册任何更改 - 显示的值仍然是一个空数组。但是，如果我只使用一个裸 FormControl，它就可以工作，并且我会看到反映的更改，例如：
<h1>
FormControl Value
</h1>
<pre>
{{ myControl.value | json }}
</pre>
<mat-selection-list id='1' [formControl]="myControl">
<mat-list-option value="SOMETHING">
SOMETHING
</mat-list-option>
<mat-list-option value="SOMETHING2">
SOMETHING2
</mat-list-option>
</mat-selection-list>
有关示例，请参见https://stackblitz.com/edit/angular-material2-issue-yv1qaq。有谁知道这里发生了什么？我在使用 Angular 6/Material 6。我知道 selectedOptions 等存在各种问题，但看起来它们现在已经修复，这应该可以正常工作吗？
编辑 - Sooo，这很奇怪。正如评论中指出的那样，如果您更正 FormControlName …
我想知道如何检查复选框是否被选中，如果没有选中，则会向用户显示错误消息。我设法放置了错误消息，但无法将其与表单的其余部分一起使用。你能帮助我吗？这是我必须做的。
<mat-checkbox class="hcs-full-width" [formControl]="termsFormControl"> Aceite os termos de uso
</mat-checkbox>
<mat-error *ngIf="termsFormControl.hasError('required')">
Termo é
<strong>requirido</strong>
</mat-error>
.ts
export class AppComponent implements OnInit {
private subscription: Subscription;
uri: string;
ssid: string;
sessiondId: string;
ip: string;
mac: string;
ufi: string;
mgmtBaseUrl: string;
clientRedirectUrl: string;
req: string;
userName: string;
hmac: string;
name: string;
email: string;
constructor(@Inject(DOCUMENT) private document: any, private route: ActivatedRoute) {
}
ngOnInit() {
this.route.queryParams
.filter(params => params.mac)
.subscribe(params => {
console.log(params);
this.ssid = params.ssid;
this.sessiondId = params.sessionId;
this.ip = params.ip; …我已经开始学习 angular 2 材料，这很令人困惑，因为我在文档中找不到很多东西，而且官方material.io css 是根据类编写的，而 angular 材料使用“类似指令”的对象。
我只想让我的网格全屏高度（高度 100%），但我找不到这样简单的例子。
这是从 angular2 材料网站上获取的最基本的网格，但是，这里的行具有固定的 1:1 比例而不是 100% 的高度：
https://stackblitz.com/edit/angular-fp1akt-hotvqw?file=app/grid-list-overview-example.html
如果我没记错的话，grid 是布局的基本构建块，其中将添加其他 html 元素。
下面是角材料的表单域。如何在正常和浮动时为占位符添加 2 种不同的自定义字体大小。字体大小：20px；（正常时） font-size : 13px; （当它浮起来变小时）
<mat-form-field class="form-group example-full-width">
<input matInput id="Fname" placeholder="First" class=" " formControlName="FirstName">
<mat-error *ngIf="firstName.invalid" class="">First name is required</mat-error>
</mat-form-field>
我在 Ng-Idle、Material 6 和 Angular 6 中发现了一个问题
"@ng-idle/core": "^6.0.0-beta.3"
"@ng-idle/keepalive": "^6.0.0-beta.3"
"@angular/core": "^6.1.9"
"@angular/cdk": "^6.4.7"
"@angular/material": "^6.4.7"
当用户空闲时，对话框（弹出窗口）会显示用户退出系统之前的倒计时。如果用户在用鼠标活动注销之前返回，倒计时将停止并且对话框将关闭/消失。
但是，在 Angular 5 中，此功能一直运行良好，直到我升级到 Angular 6。当用户在 之前返回时onTimeout，它会触发 ，onIdleEnd但对话框不会在鼠标活动时消失。我创建了一个 Angular 6 应用程序来复制这个问题。我试图确定这是 Ng-Idle 还是 Angular 问题。
Stackblitz 显示 Mat-Dialog 在 10 秒倒计时后关闭
有没有人遇到过这个问题？
设想 ：
我正在使用角材料选项卡，每个不同的选项卡都有各自的动态组件。
因此，当我切换选项卡时，它会从 DOM 中删除内容。当我再次返回该选项卡时，它会再次加载内容。
问题：
我只想将内容更改为display:none;而不是从 DOM 中删除它，而不是默认行为。