标签: angular-material2

我一直在阅读这方面的文档(https://material.angular.io/components/input/overview)有一节说明如何更改md-input-container底部的行颜色.但我不清楚属性是什么,也没有代码示例可供参考.它表示可以使用md-input-container的color属性更改下划线颜色.另外我的下划线是动画下划线,在提供的链接中可见.有人可以更清楚地解释md-input-container的属性是什么,或提供一些代码.我已经尝试添加一个名为color的指令,在css中更改md-input-container的颜色等等,我没有成功.如果有人可以解释/显示一些证明这一点的代码,那将非常有帮助.谢谢!

这是一些代码,我觉得应该根据该文本的措辞.但事实并非如此.

  <md-input-container
    color="yellow"
    class="input-half-width">
    <input
      [(ngModel)]="driftInfo.title"
      name="title"
      mdInput
      placeholder="Ange rubrik"
    >
  </md-input-container>

我希望有一个选项可以将一个项目添加到现有列表或创建一个新项目；类似于youtube的“添加到播放列表”。有以下几种工作，但是一旦将焦点放在输入框上，菜单就会消失。有没有一种方法可以在单击菜单中的一项时禁用关闭菜单？

环境是Angular 2 /材质2。

    <button md-raised-button  [mdMenuTriggerFor]="menu">Add To</button>
    <md-menu #menu="mdMenu">
      <button md-menu-item>Item 1</button>
      <button md-menu-item>Item 2</button>
      <md-input-container class="mx-4">
        <input mdInput placeholder="Create new" value="">
      </md-input-container>
    </md-menu>

我在Angular 2中制作了一个联系表格.我会做一个彩色的顶栏

<md-card class="mdcardcontact">
  <md-card-header style="background-color: black;   width:100%">
  </md-card-header>
  <div>
    <md-card-content>
      <form [formGroup]="form" class="form">
        <div>
          <md-input-container class="full-width">
            <input mdInput type="text" formControlName="name" placeholder="Votre nom">
          </md-input-container>

        </div>
       </form>
    </md-card-content>
  </div>
</md-card>

这就是我得到的:

我想像黄色矩形,但使用md-card-header:

我正在尝试导入角度材料2的内置主题但是web-storm无法解析文件路径并找到目录,尽管我的主题文件位于该确切的目录中.我尝试过不同的导入方法,但都导致了同样的问题.这是我在styles.scss文件中导入的方式

@import '~@angular/material/prebuilt-themes/indigo-pink.css';

IDE开始突出显示说明问题的材料的路径.

这是我的主题文件的完整路径.

/media/rehan/New Volume/tic-tac-toe/node_modules/@angular/material/prebuilt-themes/indigo-pink.css

如何创建具有浮动工具栏和卡片布局的工具栏,如下图所示.

https://storage.googleapis.com/material-design/publish/material_v_12/assets/0Bx4BSt6jniD7bW1TYXlMT0JxUWM/layout-structure-toolbars4.png

这是从官方材料网站上获取的.

<div id="profile-edit">
  <mat-toolbar color="primary">
    <span>Outer Toolbar</span>

    <mat-toolbar-row>
    </mat-toolbar-row>

    <mat-toolbar-row>
    </mat-toolbar-row>
  </mat-toolbar>
  <mat-card class="example-card">
    <mat-toolbar>
      <span>Inner Card Toolbar</span>
    </mat-toolbar>
  </mat-card>
</div>

这就是我到目前为止我创建的1个外部工具栏,其中包含2行以增加高度.

我不知道如何浮动页面的卡片中心和工具栏的中心.

我有很多麻烦,明显的解决方案不起作用或我做错了(可能是后者).

我想要设计我mat-menu和我的风格,我mat-menu-item试过这样做:

::ng-deep .mat-menu{
  background-color:red;
}

但它不起作用,我的菜单看起来像这样(没有任何abornomal)

<mat-menu #infoMenu="matMenu">
  <button mat-menu-item>
    <mat-icon>dialpad</mat-icon>
    <span>Resume</span>
  </button>
  <button mat-menu-item>
    <mat-icon>voicemail</mat-icon>
    <span>Portfolio</span>
  </button>
  <button mat-menu-item>
    <mat-icon>notifications_off</mat-icon>
    <span>References</span>
  </button>
  <button mat-menu-item>
    <mat-icon>notifications_off</mat-icon>
    <span>Contact</span>
  </button>
</mat-menu>

我也试过/深/但我知道不应该工作,实际上应该在Angular 4中折旧,但我做了测试,我不知道如何在这一点上设置元素的样式.

我有角度材料的mat-checkbox问题.我给了复选框这样的ID:

<mat-checkbox class="toolbar-checkbox" id="myCheckbox">
    MyCheckbox
</mat-checkbox>

在那之后,我正在尝试使用这样的元素:

(<MatCheckbox>document.getElementById('myCheckbox')).checked = true;

但不幸的是我收到了这个错误:

TS2352: Type 'HTMLElement' cannot be converted to type 'MatCheckbox'. 
Property '_changeDetectorRef' is missing in type 'HTMLElement'. 
(<MatCheckbox>document.getElementById('asdasd')).checked = true;

我怎样才能解决这个问题,或者是否有更好的方法来使用复选框而不使用[(ngModel)]？

我正在使用Angular CDK的Overlay模块。我只是找不到添加位置的方法：叠加层的绝对位置？该模块将接收top和的left位置，该位置与所连接元素的位置匹配，但是覆盖层将不接收position: absolute。由于ViewEncapsulation，我无法添加绝对位置。我真的很努力寻找解决方案。

问题： 如何使用cdkOverlayOrigin和cdkConnectedOverlayOrigin

模块：

import { OverlayModule } from '@angular/cdk/overlay';



@NgModule({
  imports: [
    OverlayModule,
  ],
  declarations: [ MenuComponent ],
})
export class MenuModule {
}

零件：

@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: [ './menu.component.scss' ],
})
export class MenuComponent {
}

模板：

 <div style="margin: 0 auto; width: 30%">
  <h1 cdkOverlayOrigin
      #checkListTrigger="cdkOverlayOrigin"
      (click)="checkListOpen = !checkListOpen"
      style="background: blue">Overlay Origin</h1>
  <ng-template
    cdkConnectedOverlay
    [cdkConnectedOverlayOrigin]="checkListTrigger"
    [cdkConnectedOverlayOpen]="checkListOpen">

    <ng-container>
      <p>Why you no positioned on h1 element</p> …

我有一个大的列表,我想加载它,因为用户向下滚动选择字段,但我怎么能在mat-select中获得滚动事件,没有事件触发滚动事件.

<mat-form-field>
  <mat-select placeholder="Choose a Doctor" formControlName="selectedDoc" (change)="drSelected()">
    <div *ngFor="let dr of doctors;let i = index" [matTooltip]="getDocDetail(i)" matTooltipPosition="right">
      <mat-option (scroll)="docScroll()" [value]="dr">
        {{dr.name}}
      </mat-option>
    </div>
  </mat-select>
  <mat-hint>List Of Doctor In Your city</mat-hint>
  <mat-error *ngIf="selectedDoc.hasError('required')">Please Select A Dr</mat-error>
</mat-form-field>

(滚动)不工作,因为mat-select没有任何其他方式的滚动事件我可以实现这一点我想首先显示10项目然后当用户滚动选项时填充其余项目.

在angular5项目上工作，我正在使用角度材料选择列表，但顶部输入文本搜索无法正常工作。

这是关于stackblitz的代码。 https://stackblitz.com/edit/angular-i3pfu2-xgembc

脚步 ：

1. 从清单中选择“运动鞋”和“鹿皮鞋”
2. 搜索中显示“ clo”
3. 从输入框中删除文本。
4. 请参阅选择列表，先前选择的选项会自动取消选择，这不会发生。

我们如何在列表中保留先前选择的选项？提前致谢。