标签: angular-material2

我正在寻找Angular Material2中对侧栏内嵌套菜单的支持.顶级通常默认关闭,打开顶级会暴露嵌套的菜单项.

我认为这是一个有意义的起点,但子导航项在父项之外渲染(很差):

plnkr

<md-sidenav-container class="my-container">
  <md-sidenav #sidenav class="my-sidenav">
    <md-list>
        <md-list-item>
          <h3 md-line> First Parent </h3>
          <md-nav-list>
            <a md-list-item href="#">First Child</a>
            <a md-list-item href="#">Second Child</a>
            <a md-list-item href="#">Third Child</a>
          </md-nav-list>
        </md-list-item>
        <md-list-item>
          <h3 md-line> Second Parent </h3>
          <md-nav-list>
            <a md-list-item href="#">First Child</a>
            <a md-list-item href="#">Second Child</a>
          </md-nav-list>
        </md-list-item>
    </md-list>
  </md-sidenav>  
  <div class="my-container">
    <button md-button (click)="sidenav.open()">Open</button>
  </div>
</md-sidenav-container>

有人用@ angular/material创建了这种侧边栏菜单吗？

我有一个array来自我的API而且我正在使用Material2#AutoComplete过滤这个...它到目前为止工作,但是我很难显示另一个属性而不是选项中的绑定值.

我知道我必须使用displayWith它,但它不能像我期望的那样工作.调用的函数[displayWith]="displayFn.bind(this)">只返回我id,如何获取完整的对象,然后返回nameon函数.

顺便说一句,我仍然想在我的FormControl中绑定id .

一些代码:

零件:

export class AutocompleteOverviewExample {
  stateCtrl: FormControl;
  filteredStates: any;

  states = [
    { 
      id: 1,
      name: 'Alabama'
    },
    {
      id: 2,
      name: 'North Dakota'
    },
    {
      id: 3,
      name: 'Mississippi'
    }
  ];

  constructor() {
    this.stateCtrl = new FormControl();
    this.filteredStates = this.filterStates('');
  }

  onKeyUp(event: Event): void {
    this.filteredStates = this.filterStates(event.target.value);
  }

  filterStates(val: string): Observable<any> {
    let …

我想将显示标签的标签栏居中,以便我可以在左侧添加一个连接到标签的侧栏.这是我的代码:

 <div class="flex-container">

  <div class="flex-item1">
    <md-tab-group>
    <md-tab label="PERSONAL">Personal content</md-tab>
      <md-tab label="SOCIAL">Social content</md-tab>

      <md-tab label="BUSINESS">Business content

        <b-app></b-app>
      </md-tab>
    </md-tab-group>
  </div>


<div class="flex-item2">
  <div class="item item-5" fxLayout="column">
    <md-input-container class="search-area">
    <input mdInput placeholder="search" >
    <!--md-icon svgIcon="thumbs-up"></md-icon-->
    </md-input-container>

  </div>

</div>

我正在尝试将Angular Material 2元素注入我编写的自定义错误处理程序中,但我一直收到此错误:

Cannot instantiate cyclic dependency! ApplicationRef ("[ERROR ->]"): in NgModule AppModule in ./AppModule@-1:-1

这是错误处理程序类:

@Injectable()
export class CustomErrorHandler implements ErrorHandler {

  constructor(private snackBar: MdSnackBar) {
  }

  handleError(error: any): void {
    //FIXME: display popup
    console.error('Error occurred!');
    console.error(error);
    this.snackBar.open('Application Error: ' + error, 'X', {
      duration: environment.snackBarTime,
    });
  }

}

这是app.module的提供者部分

providers: [
    SearchService,
    CompanyService,
    MdSnackBar,
    PopupService,
    AuthService,
    LoginService,
    AuthGuard,
    ErrorService,
    TokenStorageService,
    BankService,
    CountryService,
    {provide: ErrorHandler, useClass: CustomErrorHandler},
    {provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true},
  ],
  exports: [
    TranslateModule
  ],
  bootstrap: …

有没有人知道如何在Angular WebApplication中使用/启用动画图标,这些图标显示在材料设计文档中:https://material.io/design/iconography/animated-icons.html#usage

我做了同样的事情: 如何通过Angular 4中的共享模块正确导入Angular Material模块？

除了我想要创建一个类似ui-kit的模板,然后在具有不同位置的不同应用程序中使用它(它们不在同一文件夹中).

目前,我正在这样做,一切正常,除非我尝试在我的sharedComponent中使用库,就像我想要使用:

<button mat-raised-button color="primary">Click me!</button>

角度材料按钮,

angular-cli不会抛出任何错误,我只是在控制台上看到这个错误:

Error: StaticInjectorError[ElementRef]: 
  StaticInjectorError[ElementRef]: 
    NullInjectorError: No provider for ElementRef!
    at _NullInjector.get (core.js:993)
    at resolveToken (core.js:1281)
    at tryResolveToken (core.js:1223)
    at StaticInjector.get (core.js:1094)
    at resolveToken (core.js:1281)
    at tryResolveToken (core.js:1223)
    at StaticInjector.get (core.js:1094)
    at resolveNgModuleDep (core.js:10878)
    at NgModuleRef_.get (core.js:12110)
    at resolveDep (core.js:12608)
BtnComponent.html:3 ERROR TypeError: Cannot read prop

并且通过谷歌搜索找不到任何有用的东西.

任何提示都可能有所帮助

更新:

我创建了一个github存储库,它将重现错误.

https://github.com/molikh/shared-module

我也在角度材料库中写了一个更多解释的问题:https: //github.com/angular/material2/issues/9294#event-1416171140

我使用了ngx-bootstrap模态.但是当我使用mat-select内部时,我遇到了问题.在模态后面的mat-select选项显示.我已经这些解决方案在这里的解决方案,并 同时这一个

这是我的代码

<ng-template style="border: 0px ;z-index: 100" #editTemplate>
  <mat-form-field>
                <mat-select multiple placeholder="Multiple Cities" [(ngModel)]="currentCity" name="Paris" ariaLabel="cities[0]">
                  <mat-option *ngFor="let city of cities" [value]="city.value">
                    {{ city.viewValue }}
                  </mat-option>
                </mat-select>
              </mat-form-field>
<ng-template>

我尝试使用<mat-autocomplete>Angular Material(不是AngularJS)而不使用反应形式.但他们所有的例子都使用反应形式......

我尝试做的事情:
1.当输入内容时mat-input,进行Ajax调用以检索用户列表
2.显示自动完成中的用户列表(显示用户名),但将用户存储为模型
3当模型改变时,调用我选择的函数

现在我做那些疯狂的事情(我说疯了似乎很多).

<mat-form-field fxLayout>
  <input type="text"
             matInput fxFlex="100"
             [(ngModel)]="listFilterValue"
             (keyup)="memberInputChanged(input.value)"
             (change)="memberChanged()"
             *ngIf="isAutocompleteNeeded()"
             #input
             [matAutocomplete]="auto">
</mat-form-field>

<mat-autocomplete #auto="matAutocomplete" [displayWith]="getMemberAsStr">
       <mat-option *ngFor="let member of members | async" [value]="member">
          {{ getMemberAsStr(member) }}
       </mat-option>
</mat-autocomplete>

现在,只有console.log在我的JS中才能看到所谓的内容,具有什么价值,所以我不在这里分享它.我使用正确的属性,正确的逻辑吗？

(members我的组件中的属性是Rxjs BehaviourSubject)

我现在所做的事情不起作用,因为listFilterValue它从未被设定为任何东西.

谢谢你的帮助

angular material2 mat-checkbox

如何修改左图标大小和左图标状态颜色？

<mat-checkbox>Like Me.</mat-checkbox>

我正在使用Angular 6,我按照本指南中的步骤将材料组件添加到我的项目中.但是当我在代码中使用stepper组件时,我在控制台中得到以下异常:

NewReqComponent.html:16 ERROR TypeError: _this._driver.validateStyleProperty is not a function
at browser.js:844
at Array.forEach (<anonymous>)
at browser.js:843
at Array.forEach (<anonymous>)
at AnimationAstBuilderVisitor.push../node_modules/@angular/animations/fesm5/browser.js.AnimationAstBuilderVisitor._validateStyleAst (browser.js:840)
at AnimationAstBuilderVisitor.push../node_modules/@angular/animations/fesm5/browser.js.AnimationAstBuilderVisitor.visitStyle (browser.js:780)
at AnimationAstBuilderVisitor.push../node_modules/@angular/animations/fesm5/browser.js.AnimationAstBuilderVisitor.visitState (browser.js:678)
at browser.js:657
at Array.forEach (<anonymous>)
at browser.js:655

我使用了这样的组件:

<mat-horizontal-stepper>
  <mat-step label="step1">step1</mat-step>
  <mat-step label="step2">step2</mat-step>
</mat-horizontal-stepper>

和app.module.ts:

imports: [
  BrowserModule,
  BrowserAnimationsModule,
  RouterModule.forRoot(appRoutes) ,
  FormsModule, HttpClientModule ,
  FormWizardModule ,
  ArchwizardModule,
  MatStepperModule
],