我正在尝试使用动态名称实现datepicker组件.

我正在使用Angular 4开发基于Angular Material 2的项目,这是我的实现:

<input mdInput [mdDatepicker]="'start' + column.name + 'Picker'" placeholder="Start {{column.label}}" formControlName="start{{column.name}}">
<button mdSuffix [mdDatepickerToggle]="'start' + column.name + 'Picker'"></button>
<md-datepicker #start{{column.name}}Picker></md-datepicker>

其中,column.name动态地改变我的HTML页面.

在运行时我收到此错误:

ERROR TypeError: this._datepicker._registerInput is not a function

你对这个错误的原因有什么看法吗？

注意:column.name用mdDatepicker and mdDatepickerToggle属性中的静态值替换可以解决问题,但我的目标是使用动态值运行此代码

编辑:使用 和属性中column.name的静态值替换只解决运行时错误.但是,在所有内容都是静态的情况下,不会触发datepicker,这意味着即使名称中的名称也必须包含静态值mdDatepickermdDatepickerToggle#start{{column.name}}Pickermd-datepicker

我想显示一个自定义对话框,但我收到此错误:

HeaderMenuComponent.html:41错误错误:找不到RegisterFormComponent的组件工厂.你有没有把它添加到@ NgModule.entryComponents？在noComponentFactoryError(core.es5.js:3202)在CodegenComponentFactoryResolver.webpackJsonp .../../../core/@angular/core.es5.js.CodegenComponentFactoryResolver.resolveComponentFactory(core.es5.js:3267)在PortalHostDirective .webpackJsonp .../../../cdk/@angular/cdk.es5.js.PortalHostDirective.attachComponentPortal(cdk.es5.js:2706)在MdDialogContainer.webpackJsonp .../../.. /材料/@angular/material.es5.js.MdDialogContainer.attachComponentPortal(material.es5.js:17625)在MdDialog.webpackJsonp .../../../material/@angular/material.es5.js.MdDialog._attachDialogContent (material.es5.js:17901)在MdDialog.webpackJsonp .../../../material/@angular/material.es5.js.MdDialog.open(material.es5.js:17813)在HeaderMenuComponent.webpackJsonp Object.eval中的.../../../../../src/app/header-menu/header-menu.component.ts.HeaderMenuComponent.showRegister(header-menu.component.ts:64) [as handleEvent](HeaderMenuComponent.html:41)at handleEvent(core.es5.js:11997)at callWithDebugContext(core.es5.js:13458))

我已经尝试用这里提到的解决方案来解决它:Angular2材质对话框有问题 - 你有没有把它添加到@ NgModule.entryComponents？.

但它对我不起作用.

这是我的代码:app.module.ts

    import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { CollapseModule } from 'ngx-bootstrap/collapse';
import {AccordionModule} from 'ngx-bootstrap/accordion';
import {TabsModule} from 'ngx-bootstrap/tabs';
import {AlertModule} from 'ngx-bootstrap/alert';
import { ModalModule } from 'ngx-bootstrap/modal';
import { Angular2FontawesomeModule } from 'angular2-fontawesome/angular2-fontawesome';
import { …

我有角度材料的输入组件:

<input mdInput placeholder="Name" disabled floatPlaceholder="never">

我有两个问题:

1. 处于禁用状态时,如何将下划线更改为粗体？
2. 我知道API没有具体说明,但有没有办法让这个floatPlaceholder属性在这里工作.(API仅提及此属性的使用md-select).

我正在构建一个表单来为API创建一个POST.我正在使用Angular Material 4,而我正在使用Material Design提供的Autocomplete组件.

这是我的HTML组件:

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

哪个工作正常,我可以输入并过滤结果,然后如果我从列表中选择项目,它将输入到输入字段并保留在那里.

如您所见,我基于对象Team的属性过滤列表,该属性来自Team []的数组.

这个对象当然还有其他值,我需要做的是当我从我的自动完成选项列表中选择一个值时,它应该使用同一个对象调用一个方法来获取属性中的字符串,解析它并分配它变量.

这是我的团队课程:

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

这是最初的数组:

"teams": [{
     "teamName": "River";
     "selfLink": "http://localhost:4200/teams/1"
   },
   {
     "teamName": "Boca";
     "selfLink": "http://localhost:4200/teams/2"
   }]

我创建了初始数组:

ngOnInit(){
    this.match = new Match;
    this.availableTeams = [];
    this.getTeams();
    this.HomeTeamCtrl = new FormControl();
    this.filteredHomeTeams = this.HomeTeamCtrl.valueChanges
        .startWith(null)
        .map(team => team ? this.filterTeams(team) …

我在为Angular 2 Material实现自定义主题时遇到很多困难。我一直在遵循以下指南：

• https://material.angular.io/guide/theming
• https://blog.thoughtram.io/angular/2017/05/23/custom-themes-with-angular-material.html

并为我的颜色生成了自定义调色板。例如我的“原色”颜色：

$dz-primary: (
    50 : #e8ebee,
    100 : #c6cdd4,
    200 : #a0acb7,
    300 : #7a8a9a,
    400 : #5e7184,
    500 : #41586e,
    600 : #3b5066,
    700 : #32475b,
    800 : #2a3d51,
    900 : #1c2d3f,
    A100 : #82baff,
    A200 : #4f9eff,
    A400 : #1c83ff,
    A700 : #0275ff,
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #000000,
        400 : #ffffff,
        500 : #ffffff,
        600 : #ffffff,
        700 : #ffffff,
        800 : #ffffff,
        900 …

TL; DR

我正在努力使FAB固定在侧面菜单的右下角。当我有很多元素并且可以滚动时，它可以工作，但是当没有滚动时，它就不能工作。这是一个与之一起玩的闪电战的链接。请原谅一些杂乱无章的组织，我不得不撕掉一些东西，并对其格式进行一些更改。

问题与描述

我正在制作侧面菜单div，并希望在其上使用FAB像这样：

从文档中，我可以生成一些效果很好的菜单，并且在菜单上满是席子卡时，正是我想要的。这是它的外观的gif：

但是，当没有足够的卡片可以滚动并且添加按钮位于最后一张卡片的正下方时，就会出现问题：

我希望始终在侧边菜单的底部具有该添加按钮，但也要使其保持粘性并在可能滚动时保持在该位置。从我看到的内容来看，有一些方法可以轻松完成旧版本Angular的操作，但是我所看到的一切都没有表明最新版本的情况。

当前代码

main.html

<mat-drawer-container class="container">
  <mat-drawer mode="side" opened="true">
    <iaas-sideMenu></iaas-sideMenu>
  </mat-drawer>

  ... Content on other portion of screen ...

</mat-drawer-container>

sideMenu.html

<div>
  <div class="searchBar-div">
    <iaas-searchbar></iaas-searchbar>
  </div>
  <div>
    <iaas-sidecard *ngFor="let card of cards" [cardData]="card"></iaas-sidecard>
  </div>
  <div class="addButton-div">
    <iaas-addbutton></iaas-addbutton>
  </div>
</div>

sideMenu.css

.addButton-div {
  transform: translateX(195px); /* Bringing the button to the right */
  bottom: 5px; /* Ensure it's 5 px from the bottom */
  position: sticky; /* Sticks it …

我有一个关于Angular 5的项目，遇到以下问题。我有一个组件ComponentWithSnackBar，它触发显示小吃店：

showSnackBar() {
  this.snackBar.open('Message text', 'Close', {
    duration: 5000,
    verticalPosition: 'top',
  });
}

它按预期工作。但是我不知道如何测试。我尝试编写测试：

describe('ComponentWithSnackBar', () => {
  let snackBar: MatSnackBar;
  let overlayContainer: OverlayContainer;
  let overlayContainerElement: HTMLElement;

  function createComponent<T>(component: Type<T>, providers: Provider[] = [], declarations: any[] = []): ComponentFixture<T> {
    TestBed.configureTestingModule({
      imports: [AppModule, RouterTestingModule, NoopAnimationsModule],
      declarations: declarations,
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
      providers,
    }).compileComponents();

    inject([MatSnackBar, OverlayContainer], (sb: MatSnackBar, oc: OverlayContainer) => {
      snackBar = sb;
      overlayContainer = oc;
      overlayContainerElement = oc.getContainerElement();
    })();

    return TestBed.createComponent<T>(component);
  }

  it(`Should display snack-bar`, fakeAsync(() => {
    const …

我正在实现一个语言切换组件，该组件显示复选框，每个复选框对应于应用程序的每种语言（带有的翻译@ngx-translate）。

单击复选框之一时，应用语言已正确切换，但单击的mat-checkbox仍未选中。

范本：

<mat-checkbox [checked]="selectedLanguage == 'en'" (click)="switchLanguage('en')">English</mat-checkbox>
<mat-checkbox [checked]="selectedLanguage == 'fr'" (click)="switchLanguage('fr')">French</mat-checkbox>
<mat-checkbox [checked]="selectedLanguage == 'de'" (click)="switchLanguage('de')">German</mat-checkbox>

零件 ：

export class CheckboxOverviewExample {
  public selectedLanguage: string;

  constructor(){
    this.selectedLanguage = 'fr';
  }

  public switchLanguage(lang: string) {
    this.selectedLanguage = lang;
    // this.translateService.use(lang); // changing ngx-translate language
    console.log('Switched to ' + lang);
  }
}

[checked]路由到组件时，绑定正在工作。在mat-checkbox法语中确实检查时降落到组件（默认值）。现在，当我单击德语或英语时，语言会切换，法语复选框会正确取消选中，但是单击的复选框不会选中。

我遗漏了一些内容，可能只是一个小细节，但是我不明白为什么德语/英语不检查而法语却正确取消了检查。

看看这个简单的stackblitz代码以重现我的情况。

我正在处理MatSnackBar的错误,我对显示对话框的位置有问题而且它没有自动隐藏.

service.ts

facebookLogin() {
const provider = new firebase.auth.FacebookAuthProvider();
return this.oAuthLogin(provider);
}

private oAuthLogin(provider) {
return this.afAuth.auth.signInWithPopup(provider)
  .then((credential) => {
    this.pushUserData(credential.user)
    this.router.navigate(['/userProfile'])
  })
  .catch(error => {
    this.handleError(error);

  });
}

private handleError(error: Error) {
  console.error(error);
  this.snackBar.open(error.message, this.action, { duration: 1000 });
}

component.ts

facebookLogin() {
  this.auth.facebookLogin()
}

当我从同一个组件测试它时,一切正常:

openSnackBar() {
this.snackBar.open(this.message, this.action, {
  duration: 500,
});
}

我写这篇文章是因为我对Angular Material的Mat Toolbar和Mat-sidenav有疑问。我试图使Sidenav进入工具栏，并且工具栏始终占据顶部，如下所示：

例

这是我的代码：

<mat-sidenav-container class="sidenav-container" autosize>
  <mat-sidenav #drawer class="sidenav" fixedInViewport="true"
      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
      [mode]="(isHandset$ | async) ? 'side' : 'push'"
      [opened]="(isHandset$ | async)">
      <mat-toolbar class="fixed-header">
        <img class="logooTest" src="data:image/gif;base64,test"/>
      </mat-toolbar>
   		<mat-nav-list>
			  <mat-list-item>
				<a routerLink="/dashboard">Test</a>
        <mat-icon mat-list-icon>home</mat-icon>
        </mat-list-item>
        <mat-list-item>
          <a routerLink="/dashboard">Test</a>
          <mat-icon mat-list-icon>home</mat-icon>
          </mat-list-item>
          <mat-list-item>
          <a routerLink="/test">Test</a>
          <mat-icon mat-list-icon>tune</mat-icon>
          </mat-list-item>
            <mat-list-item>
            <a routerLink="/#">Test</a>
            <mat-icon mat-list-icon>settings</mat-icon>
            </mat-list-item>
            <mat-list-item>
            <a routerLink="/#">Test</a>
            <mat-icon mat-list-icon>layers</mat-icon>
            </mat-list-item>
            <mat-list-item (click)="showSubmenu = !showSubmenu" class="parent">
              <span class="full-width" *ngIf="isExpanded || isShowing">Test dropdown</span>
              <mat-icon mat-list-icon>flash_on</mat-icon>
              <mat-icon …