标签: angular-material

我已经参加了 MOOC（Coursera Angular）并遵循它。最近我更新了我的 npm，从那时起我遇到了构建错误。我在网上搜索过，但没有一个能解决我的问题。

ERROR in node_modules/@angular/material/dialog/typings/dialog-container.d.ts(10,10): error TS2305: Module '"C:/wamp64/www/Coursera/Angular/Angular-Coursera/node_modules/@angular/cdk/portal"' has no exported member 'BasePortalOutlet'.
 node_modules/@angular/material/dialog/typings/dialog-container.d.ts(10,45): error TS2305: Module '"C:/wamp64/www/Coursera/Angular/Angular-Coursera/node_modules/@angular/cdk/portal"' has no exported member 'CdkPortalOutlet'.
node_modules/@angular/material/expansion/typings/accordion.d.ts(1,30): error TS2307: Cannot find module '@angular/cdk/accordion'.
node_modules/@angular/material/expansion/typings/expansion-panel.d.ts(10,34): error TS2307: Cannot find module '@angular/cdk/accordion'.
node_modules/@angular/material/expansion/typings/expansion-panel.d.ts(36,14): error TS2314: Generic type 'TemplatePortal<C>' requires 1 type argument(s).
node_modules/@angular/material/select/typings/select.d.ts(11,10): error TS2305: Module '"C:/wamp64/www/Coursera/Angular/Angular-Coursera/node_modules/@angular/cdk/overlay"' has no exported member 'CdkConnectedOverlay'.
node_modules/@angular/material/sidenav/typings/drawer.d.ts(15,10): error TS2305: Module '"C:/wamp64/www/Coursera/Angular/Angular-Coursera/node_modules/@angular/cdk/scrolling"' has no exported member 'CdkScrollable'.
node_modules/@angular/material/snack-bar/typings/snack-bar-container.d.ts(10,10): error TS2305: Module '"C:/wamp64/www/Coursera/Angular/Angular-Coursera/node_modules/@angular/cdk/portal"' has no exported member 'BasePortalOutlet'. …

由于某种原因，这件事不起作用。我可以很好地使用它不确定的模式。它显示和旋转，因为它应该。但是我需要向用户展示它在过程中所处的位置的价值。

这是我的 HTML

<mat-progress-spinner *ngIf='ShowLoader'
class="progressSpinner"
[color]="myCustomColor"
[value]="myCustomValue"
[mode]="mode">
</mat-progress-spinner>

我的打字稿

myCustomColor = 'primary';
mode = 'determinate';
myCustomValue: number = 0;

然后在我的页面加载功能上作为测试示例

pageload() {
    this.ShowLoader = true;

    for (let i = 0; i < 1000; i++) {

       const num = ((i / 1000) * 100);
      setTimeout(() => {
        this.myCustomValue = num;
      }, 500);
    }
}

我有一个将 angular5 与材料一起使用的应用程序。虽然缺少一些示例和额外的文档，但开发过程相当顺利。直到现在，当我偶然发现这个无法修复的滑块问题时。

在我的组件中，我声明了myValue = 3用作a的默认值的 a <mat-slider>。我还在<h2>它的正上方绘制了这个值。

我可以拖动滑块并查看 thumbLabel 更新。但是，{{myValue}}h2 中的 不更新。

我是否需要手动“获取”更新后的号码？我似乎无法弄清楚他们在文档中是如何做的。

我在想，也许这与加载“封装”有关，但添加并没有什么区别。

每当滑块值发生变化时，如何自动更新 {{myValue}}？

编辑：

我使用的是 Angular 5 和材料 5.2.4，而不是 ng6。您可以在以下位置找到代码示例：https : //stackblitz.com/edit/angular-material2-issue-bbfwhn

编辑2：

我找到了这篇文章：How to get current value of angular material slider。它似乎在我的情况下工作，但我希望有一个更优雅的解决方案，而不是在组件中编写一个单独的函数来获取值。

此外，此示例展示了另一种获取视口中值的简单方法：添加#matslider到滑块并使用 .html 获取 html 中的值{{matslider.value}}。然而，我也需要myValue组件本身（传递给提供者）。

编辑3：

解决此问题的动态方法（当您有很多滑块时），该方法扩展了如何获取 Angular Material 滑块的当前值？这是：

组件.ts：

setSlidervalue(event: any){
  this[event.source._elementRef.nativeElement.attributes.valvar.nodeValue] = event.value;
}

组件.html：

<h2>slidervalue: {{testValue}}</h2>
<mat-slider min="1" max="5" step="0.5" …

我mat-date-picker在我的应用程序中使用过，html 文件如下所示：

  <mat-form-field>
<input matInput [matDatepicker]="picker" formControlName="date" placeholder="Choose a date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>

我在另一个组件中使用了完全相同的代码段并且它可以工作，但是在这个组件中它显示错误：

ERROR 错误：mat-form-field 必须包含一个 MatFormFieldControl。

即使页面在错误后加载，日期选择器的按钮也不会显示，我无法选择日期。

我有一个用 Angular 制作的 Sidenav 菜单。该组件如下所示：

模板：

 <mat-toolbar color="primary" [fxLayoutAlign]="(settings.menuType != 'mini') ? 'space-between center' : 'center center'" class="sidenav-header">
    <a mat-raised-button color="accent" routerLink="/" (click)="closeSubMenus()" class="small-logo">Menu</a>
    <a *ngIf="settings.menuType == 'default'" class="logo" routerLink="/" (click)="closeSubMenus()">mEMS</a> 
</mat-toolbar>

<div fxLayout="column" fxLayoutAlign="center center" class="user-block transition-2" [class.show]="settings.sidenavUserBlock"> 
    <div [fxLayout]="(settings.menuType != 'default') ? 'column' : 'row'" 
         [fxLayoutAlign]="(settings.menuType != 'default') ? 'center center' : 'space-around center'" class="user-info-wrapper">
        <div class="user-info">
            <p class="name"> {{currentUser}}</p>
            <p *ngIf="settings.menuType == 'default'" class="position">Rocket Scientist<br> </p>
        </div>
    </div>
    <div *ngIf="settings.menuType != 'mini'" fxLayout="row" fxLayoutAlign="space-around center" class="w-100 muted-text"> …

我正在使用 Angular 材料并使用 Mat-Select。当用户进行选择时，我想抓取一个用户，该用户实际上是一个具有 Id 和 description 属性的对象。

<mat-form-field>
    <mat-select placeholder="Select User Type"  (selectionChange)="selectUserType(user)">
        <mat-option  *ngFor="let user of userTypeList" [value]="user.description">
            {{ user.description }}
        </mat-option>
    </mat-select>
</mat-form-field> 

当用户进行选择时，我在这里收到未定义的信息：

public selectUserType(userType: OxygenUserType) {
    console.log('selected');
    this.selectedUserType = userType;
    console.log(this.selectedUserType);
}

我也试过，(selectionChange)="selectUserType($event.value)"但这不会产生一个对象。我需要用户选择是一个看起来像这样的对象：

{id:1, description:Agent},
{id:2, description:Dealer}

这个对象基于这个接口

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

我有角度材料的对话框问题，当我按下按钮打开它时，它确实存在，但不是 rly。对话框不显示，但控制台打印“打开”和“关闭”，没有错误

对话框组件

import {Component, Inject} from '@angular/core';
import {RssFeed} from "../model/rssFeed";
import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material";
import {AppService} from "../service/app.service";

@Component({
  selector: 'app-new-feed-dialog',
  templateUrl: './new-feed-dialog.component.html',
  styleUrls: ['./new-feed-dialog.component.css']
})
export class NewFeedDialogComponent {

  rssFeed: RssFeed = new RssFeed();

  constructor(private service: AppService,
 public dialogRef: MatDialogRef<NewFeedDialogComponent>,
 @Inject(MAT_DIALOG_DATA) public data: any) {
  }

  onSaveClick(): void {
    this.service.saveRssFeed(this.rssFeed)
    this.dialogRef.close(this.rssFeed);
  }

  onCancelClick(): void {
    this.dialogRef.close();
  }

}

html

<h2 mat-dialog-title>
  <mat-icon>library_add</mat-icon>
  New Feed
</h2>
<mat-dialog-content>
  <form>
    <mat-form-field class="full-width">
      <input matInput placeholder="Feed Name" name="name" [(ngModel)]="rssFeed.name">
    </mat-form-field> …

嗨，我想在单击时重置角度材料自动完成的值，但我不知道该怎么做。

我的代码：

  <mat-form-field>
        <input type="text" placeholder="Give Rights" formControlName="selectedOption" aria-label="User" matInput  [matAutocomplete]="auto" (input)="onSearchChange($event.target.value)">
        <mat-autocomplete #auto="matAutocomplete">
            <mat-option *ngFor="let user of users" [value]="user.displayName" (onSelectionChange)="setSelectedUser($event, user)">
                {{ user.displayName }}
            </mat-option>
        </mat-autocomplete>
        <button (click)="resetValue($event)">RESET</button>
    </mat-form-field>

TS :

    this.nameForm = this._formBuilder.group({
    selectedOption: new FormControl()
});    

    resetValue(){
    console.log("Value -> ", this.nameForm.value.selectedOption);
    this.nameForm.value.selectedOption = "test";
}

你能帮助我吗 ？

我有一个mat-nav-list每个mat-nav-item都有一个(click)-event 附加的导航。在每个项目中，我都有一些mat-chips用于显示一些状态信息。悬停芯片时，我没有从列表项中获取指针光标，并且单击不会触发父母事件。

我怎样才能mat-chip不干扰光标和点击事件？

<mat-nav-list>
    <mat-list-item *ngFor="let item of items" (click)="selectItem(item)">
        {{item.name}}
        <mat-chip-list>
            <mat-chip>Label</mat-chip>
        </mat-chip-list>
    </mat-list-item>
</mat-nav-list>

我正在使用角材料。

问题出在mat-select. 它不绑定记录编辑时的值。

这是我的代码..

HTML

如您所见，我test.subject在模型中绑定了（一个对象）并subject.title在下拉列表中显示为文本。

   <mat-form-field>
     <mat-select [(ngModel)]="test.subject" placeholder="Subject" name="subject">
       <mat-option>--</mat-option>
       <mat-option *ngFor="let subject of subjects" [value]="subject">
         {{subject.title}}
       </mat-option>
     </mat-select>
   </mat-form-field>

成分

在组件中，我从数据库中获取了这个值。

this.test = {
   "subject": {
       "_id": "5b3883b4067d8d2744871eff",
       "title": "Subject 1"
    }
}

this.subjects = [
   {
       "_id": "5b3883b4067d8d2744871eff",
       "title": "Subject 1"
   },{
        "_id": "5b3843b4067d8d2744435erx",
        "title": "Subject 2"
   }
]

所以在这里我希望下拉菜单应该选择 value Subject 1。但事实并非如此。