标签: angular-material2

我使用git项目作为虚拟键盘(https://ngx-material-keyboard.github.io/demo/).我有一些问题要让它在450*250像素的小型设备上运行.

最后,如果我使用开发工具直接在Web浏览器上修改它,我会在css中找到必要的更改.

现在我必须找到改变来源的正确位置.

将使用angular2-material的overlay组件来显示键盘.

如果我在cdk-overlay-container中注释掉该位置,它的工作原理如下:

.cdk-overlay-container {
/* position: fixed; */
z-index: 1000;

}

但我无法从我的角度应用中覆盖这些.有什么建议？

更改截图

我做了同样的事情: 如何通过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>

我试图mat-tooltip从角度材料2 应用一些css更改,并在文档中找到,matTooltipClass然后可以在css文件中进行选择以进行更改.但是,我无法让它工作.

component.html:

  <mat-cell 
    *matCellDef="let productInfo" 
    matTooltip="{{productInfo.description}}"
    matTooltipClass="tooltip">
     {{ productInfo.description}}
  </mat-cell>

component.scss:

.tooltip {
background-color: red;
color: blue;
font-size: 20px;
}

我正在使用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
],

我想这样做 :

<ng-template #content>
  <mat-step>step 1</mat-step>
  <mat-step>step 2</mat-step>
</ng-template>

<mat-horizontal-stepper>
  <ng-container *ngTemplateOutlet="content"></ng-container>
</mat-horizontal-stepper>

但我得到这个错误

错误错误:StaticInjectorError(AppModule)[MatStep - > MatStepper]:StaticInjectorError(平台:核心)[MatStep - > MatStepper]:NullInjectorError:没有MatStepper的提供者!

我认为这是因为mat-step在其构造函数中注入mat-stepper https://github.com/angular/material2/blob/master/src/lib/stepper/stepper.ts#L53

所以我尝试stepper用ngOutletContext 传递上下文

<mat-horizontal-stepper #ContainerStepper="matHorizontalStepper">
  <ng-container *ngTemplateOutlet="content" ngOutletContext="{$implicit:{stepper:ContainerStepper}}"></ng-container>
</mat-horizontal-stepper>

但这不起作用.

任何的想法 ？

Angular Material CDK树组件文档说:

"平面树通常更容易进行样式和检查.它们对滚动变化也更友好,例如无限或虚拟滚动 "

有关如何将虚拟滚动应用于CDK平面树的任何想法？

我有一个巨大的树来渲染,现在它很慢,当我递归打开所有节点时它会崩溃

我试过<cdk-virtual-scroll-viewport> @ angular/cdk-experimental但是没弄清楚如何将它与树组件集成

这个问题是参考这个 Github问题,mat-menu使用鼠标悬停不能切换,我基本上试图用角度材料的菜单替换基于bootstrap的水平导航菜单.阻止我复制基于bootstrap的菜单的唯一一件事就是mat-menu在悬停时打开和关闭.正如上面的Github问题所提到的,有一些解决方法可以实现我想要的,比如使用mouseEnter

(mouseenter)="menuTrigger.openMenu()"

或者在Mat-menu中添加一个span以便绑定mat-menu,

<mat-menu #menu="matMenu" overlapTrigger="false">
  <span (mouseleave)="menuTrigger.closeMenu()">
    <button mat-menu-item>Item 1</button>
    <button mat-menu-item>Item 2</button>
  </span>
</mat-menu>

但是没有一个解决方案似乎涵盖了每一个小场景,

例如

如上面的Github问题所述,第一个SO解决方案存在以下问题.

• 将鼠标光标悬停在按钮上会弹出菜单.但是如果你点击按钮,它将隐藏并显示菜单.恕我直言,这是一个错误.
• 要隐藏菜单,用户需要单击菜单外部.理想情况下,如果鼠标光标位于 超过400毫秒
  的区域(包括按钮,菜单和子菜单)之外,则菜单将被隐藏
  .

并且在试图解决上述问题之一但不能正常工作的跨度解决方案中,例如

悬停MatMenuTrigger确实mat-menu按预期打开,但如果用户在不输入的情况下移开鼠标mat-menu,则它不会自动关闭,这是错误的.

同时移动到其中一个级别的两个子菜单也关闭了一级菜单,这不是我想要的,

PS将鼠标从一个打开的菜单移动到下一个兄弟菜单不会打开下一个菜单.我想这可能是难以实现提到这里,但我认为,其中的一些可能实现的吧？

这是一个基本的stackBlitz,它重现了我正在经历的,任何帮助表示赞赏.