标签: angular-material2

请帮我修复下面描述的错误。

I am having the list of data in a table which on edit displays a dialog as shown in the screenshots:

I am Passing an id with my dialog openDialogEdit().

<button md-mini-fab class="example-fab" color="primary" (click)= "openDialogEdit(role.id);">

RolesComponent(MdDialog):

export class RolesComponent implements OnInit {
    @Input() role: Role;
    @Output() roleDeleted = new EventEmitter<Role>();
    id: number;
  role_name: string;
  status: boolean;


  constructor( private roleService: RoleService, public dialog: MdDialog ) { }

    roles: Role[];

  ngOnInit() {
    this.onRoles()
  }
  onDelete() {
    this.roleService.deleteRole(this.role.id) 
      .subscribe( …

实际上，我正在使用 Material2 设计来开发 Angular 4，所以我偶然发现了它<md-dialog>，并决定在我的应用程序中使用。

应用程序包含一个固定的 标题position:fixed和一个固定的侧边栏侧边栏。

我使用过<md-dialog>，是的，它工作正常，直到页面不滚动，但是当页面滚动到页面底部的某个位置时，单击触发<md-dialog>异常行为的按钮时，会出现固定位置 div隐藏在<md-dialog>

工作插件：https://plnkr.co/edit/1F5La3HPmd8RxXtPip3o? p=preview

有什么帮助消除这种行为吗？

我正在尝试使用有角材料的小吃栏，但遇到了一个问题 - 小吃栏没有出现在屏幕的按钮上，而是出现在需要它的按钮下方。发生的另一件事是，它还将小吃店中的文本放在我的页面上。

这是我使用的代码：

Snackbar.ts

import { Component, OnInit } from '@angular/core';
import {MdSnackBar} from '@angular/material';

@Component({
  selector: 'app-snack-bar',
  templateUrl: './snack-bar.component.html',
  styleUrls: ['./snack-bar.component.css']
})
export class SnackBarComponent implements OnInit {

  constructor(public snackBar: MdSnackBar) {}

  ngOnInit() {
  }

  openSnackBar() {
    this.snackBar.open("Hello World","action",{duration: 500});
  }
}

Snackbar.html

<button md-button (click)="openSnackBar()" aria-label="Show an example snack-bar">
  Click me
</button>

应用程序组件.ts

import { Component } from '@angular/core';
import { SnackBarComponent } from './components/snack-bar/snack-bar.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent { …

我的主题都完美运行，但由于某种原因，我的 mat-menu 只会以任何默认调用的主题为主题，而不是其他主题。所以为了不破坏它的主题我必须打电话 @include angular-material-theme($dark-theme);

在 styles.scss 的顶部，然后设置我设置的自定义类，默认情况下加载我的灯光，如下所示：

import {OverlayContainer} from "@angular/cdk/overlay";

@Component({
    selector: 'app-navbar',
    templateUrl: './navbar.component.html',
    styleUrls: ['./navbar.component.scss']
})
export class NavbarComponent implements OnInit, AfterViewInit {
    title:string = "Callum.Tech";

    themeClass: string = "light-theme";

    overlay;

    constructor(
        private overlayContainer: OverlayContainer
    ) {
        this.overlay = overlayContainer;
    }

    setDarkTheme(): void {
        this.themeClass = "dark-theme";
    }

    setLightTheme(): void {
        this.themeClass = "light-theme";
    }

    ngOnInit() {
        this.overlay.themeClass = this.themeClass;
    }
}

其他所有内容都将重新主题并正常工作，而无需调用我提到的开始包含，但 mat-menu 会出现故障，仅使用在网站启动时提供的第一个主题，并且不会随主题的其余部分而改变。

这是在 styles.scss 开头调用的深色主题和正常加载的浅色主题的样子

这里是选择的深色主题，但在 styles.scss 开始时未调用深色主题：

我不明白这个错误。我试图完全按照示例mat-datepicker中所示使用with ，但我无法消除此错误。MomentJS

我的组件代码如下所示：

import { Component,
         Input,
         OnInit }    from '@angular/core';
import { TimeRange, TimeRanges } from "./time-range-selector.constants";
import * as moment from 'moment';
import {FormControl} from "@angular/forms";


@Component({
  selector: 'time-range-selector',
  templateUrl: './time-range-selector.component.html',
  styleUrls: ['./time-range-selector.component.scss']
})
export class TimeRangeSelectorComponent implements OnInit {

  private _timeRange: TimeRange;
  public timeRanges: {} = TimeRanges;


  public startDate: FormControl = new FormControl(moment([2017, 0, 1]));

  public endDate: FormControl = new FormControl(moment([2017, 0, 2]));

  public get selectedTimeRange(): TimeRange {
    return this._timeRange;
  }

  @Input()
  public …

在这里，我将我的代码从 bootstrap 升级到 Angular Material 这是我的 Bootstrap 代码，它正在工作

 <input  type="radio" class="form-control input-sm" value="Act" (change)="onSelectionChange('Act')"  name="sectionType" #sectionType="ngModel"  id="rdb1" checked=true  ngModel required>Act

我改变为

<mat-radio-group >
    <mat-radio-button  [value]="Section" (change)="onSelectionChange('Section')"name="sectionType" #sectionType="ngModel"  ngModel>Section</mat-radio-button>
</mat-radio-group>

为什么我无法绑定数据？

我正在寻找一种方法来执行以下操作：要显示通知，我想实现一个自定义 SnackBar。我按照官方文档（这里）创建了一个简单的 Snackbar，带有一些自定义配置。

this.snackBar.open('Message one', 'OK', configSuccess);

export const configSuccess: MatSnackBarConfig = {
  panelClass: 'style-success',
  duration: 10000,
  horizontalPosition: 'left',
  verticalPosition: 'bottom'
};

这工作正常，但我想在我的 SnackBar 中显示不同的显示（特别是发送数据并显示两个按钮）。按照文档，我创建了一个组件并从中打开我的 SnackBar：

/*...*/    
this.snackBar.openFromComponent(SnackbarMessageComponent, {
              data: 'Message one',
            });
/*...*/

@Component({
  selector: 'app-snackbar-message',
  templateUrl: './snackbar-message.component.html',
  styleUrls: ['./snackbar-message.component.scss']
})
export class SnackbarMessageComponent implements OnInit {

  constructor(@Inject(MAT_SNACK_BAR_DATA) public data: any) { }

  ngOnInit() {
  }

一切正常，但现在我遇到了问题。我想将我之前定义的配置（config Success例如）传递给这个新的 SnackBar ，但是在官方文档和 Google 中我没有找到任何东西。

有没有办法做到这一点而不必全局定义它？有人可以指导我或告诉我去哪里吗？提前致谢！

我正面临在 mat-table 上应用表单数组的问题。我无法使我的 mat-cells 可编辑。

将数组对象直接传递给 [datasource] 时出现问题。但我相信它应该被实例化为新的 MatTableDataSource。

    <mat-table #table [dataSource]="c.value.contacts" FormArrayName="contacts" >

但就我而言，情况有所不同，我直接从 API 获取完整的数据集合，我使用 Form 数组来循环每个集合并绑定到 mat-table。所以在这种情况下我找不到实例化 matdatasource 的方法。

我为此创建了 stackblitz，但在这里它可以完美运行，没有任何问题。 https://stackblitz.com/edit/angular-riepzk-xygeob?file=app%2Ftable-basic-example.html

请指导我继续前进。

我正在使用Angular 4 Material,特别是Autocomplete组件.

我的选项列表filteredHomeTeams是Observable <Team []>类型,我正在构建下拉列表,并使用名为teamName的对象的属性进行选择

这是HTML:

<mat-form-field class="example-full-width">
            <input type="text" matInput placeholder="Local" [formControl]="HomeTeamCtrl" [matAutocomplete]="homeAuto">
            <mat-autocomplete #homeAuto="matAutocomplete" (optionSelected)="setHomeTeam()">
                    <mat-option *ngFor="let team of filteredHomeTeams | async" [value]="team.teamName" >
                        {{ team.teamName }}
                    </mat-option>
            </mat-autocomplete>
</mat-form-field>

正如您所看到的,我有一个名为optionSelected的事件,它调用方法setHomeTeam()

我的团队课程是:

export class Team {
    teamName: string;
    teamSelfRef: string;
}

我需要做什么,这对于经验丰富的角度程序员来说可能是非常基础的:

我在下拉列表中选择了team.teamName,输入字段中有team.teamName.如何将team.teamSelfRef从与参数相同的对象传递给"setHomeTeam()"？

我需要根据名称构建和选择对象,但我需要触发具有不同属性的逻辑.

如果我可以将整个对象作为参数传递给方法"setHomeTeam()",它也会工作

我正在使用angular5 mat-selection-list在同一组件中创建多个组件。

list-selection-example.html

 Shoes: 
<mat-selection-list #shoes>
  <mat-list-option *ngFor="let shoe of typesOfShoes" 
                   [value]="shoe">
    {{shoe}}
  </mat-list-option>
</mat-selection-list>

<button mat-button  (click)="deselectShoes()">Deselect all Shoes</button>

Cloths: 
<mat-selection-list #cloths>
  <mat-list-option *ngFor="let cloth of typesOfCloths" 
                   [value]="cloth">
    {{cloth}}
  </mat-list-option>
</mat-selection-list>

<button mat-button  (click)="deselectCloth()">Deselect all Cloths</button>

列表选择示例

export class ListSelectionExample {
  typesOfShoes = ['Boots', 'Clogs', 'Loafers', 'Moccasins', 'Sneakers'];

  typesOfCloths = ['Amaxa', 'Cotton', 'Woolen', 'Nylon'];

    @ViewChild(MatSelectionList) shoes: MatSelectionList;
    @ViewChild(MatSelectionList) cloths: MatSelectionList;


  deselectShoes(){
    this.shoes.deselectAll(); 
  }

  deselectCloth(){
    this.cloths.deselectAll(); 
  }
  ngOnInit(){

  }
}

这是完整的代码：https : //stackblitz.com/edit/angular-i3pfu2-dla3rd?file=app%2Flist-selection-example.ts

在此示例中，deselectShoes()方法按预期工作。但deselectCloth()在 …