标签: angular-material

我<mat-checkbox> ... </mat-checkbox>在应用程序中使用了一个组件，我需要将符号的颜色（“ tick”？）设置为黑色。我可以通过CSS设置背景颜色，但“前景”颜色无效。

码：

my.ts
          <mat-checkbox name="{{field.name}}"
                        [ngModel]="field.valueChecked"
                        ...
                        [ngClass]="{
                 'mandatory': field.mandatory == true
                 ,'optional': field.mandatory == false
                 ,'checkbox' : true}"
                 >
          </mat-checkbox>


my.css
    .checkbox {
        background-color: #3197ee !important;
        color: #050911 !important;
    }

任何解决方法如何改变颜色都欢迎！

我正在使用角度5，并且有一个mat-progress-bar。我还有一个2 * 60的计时器，表示2分钟。我想每秒减少进度栏的值，两分钟后，栏的值变为0！我该怎么做？

我在模态的底部添加了一个文本区域，自动对焦具有滚动到底部的副作用。没有这种自动对焦将解决此问题。不知道发生了什么。

  <mat-form-field >
      <textarea matTextareaAutosize matInput placeholder="Review Notes" [autofocus]="false" [(ngModel)]="reviewNotes"></textarea>
  </mat-form-field>

“ @ angular / material”：“ ^ 6.4.7”，

我在Angular Material扩展面板中输入了文本。但是，当我尝试在输入字段中添加空格时，它会切换扩展面板。您如何解决呢？

包含输入的面板代码：

  <mat-expansion-panel-header [collapsedHeight]="'1.55em'" [expandedHeight]="'1.55em'">
    <div class="header-left-container">
      <i class="fas fa-question"></i>
      <div *ngIf="isEditing == false" class="name">{{question.questionStr}}</div>
      <div *ngIf="isEditing == true">
        <input #textfield type="text" onClick="this.select; event.stopPropagation()()" [(ngModel)]="question.questionStr" placeholder="Title" />
      </div>
      <mat-checkbox *ngIf="isEditing == false" class="check-box" (click)="$event.stopPropagation()" (change)="checkChanged()" [(ngModel)]="question.isChecked"></mat-checkbox>
    </div>
    <div class="header-right-container">
      <button style="margin-right: 10px" *ngIf="!isEditing && !hideButtons" mat-raised-button (click)="editClicked($event); $event.stopPropagation()" [color]="'primary'">Edit</button>
      <button style="margin-right: 10px" *ngIf="isEditing && !hideButtons" mat-raised-button (click)="saveEditClicked($event); $event.stopPropagation()" [color]="'primary'">Save</button>
      <button *ngIf="!hideButtons" mat-raised-button (click)="addAnswer($event); $event.stopPropagation()" [color]="'primary'">
        <i class="fas fa-plus"></i>
        Add answer
      </button>
    </div>
  </mat-expansion-panel-header>

  <div *ngFor="let answer of question.answers">
    <app-answer-panel …

是否可以在“角度材质”多重选择中更改显示值？我该怎么做，例如Products：（0/12）取决于所选项目的数量。

我有一个看起来像的角材料分页器

我想样式，它应该看起来像

我现在很难设计它的样式。我只是能够移动分页器中的元素（开始和结束位置），除此之外，我无法进行任何修改。

请让我知道如何做所需的样式？

这是stackblitz链接https://stackblitz.com/edit/angular-tjhkpo

如何使用按钮触发器上的模板参考变量以编程方式打开Angular Material菜单，可以使用ViewChild在组件中访问它？

该菜单通常在单击时打开，但是我想在鼠标悬停时以编程方式将其打开。

（鼠标悬停）事件处理程序给出错误：无法读取未定义的属性'openMenu'。

那么，为什么在组件中未定义clickHoverMenuTrigger？

这是组件html

<button mat-icon-button [matMenuTriggerFor]="clickHoverMenu" 
  #clickHoverMenuTrigger (mouseover)="openOnMouseOver()">
  <mat-icon>notifications</mat-icon>
</button>

这是组件打字稿

@ViewChild(MatMenuTrigger) clickHoverMenuTrigger: MatMenuTrigger;

openOnMouseOver() {
  this.clickHoverMenuTrigger.openMenu();
}

此方法记录在这里https://material.angular.io/components/menu/overview

在这里提出并回答了相同的问题，如何从打字稿访问垫菜单触发器（我没有对此发表评论的声誉）

看来我正在按照上面的文档和StackOverflow解决方案中所述进行操作。

由于clickHoverMenuTrigger未定义，因此@ViewChild必须是一个问题。

Stackblitz上的代码。打开控制台以查看错误。

我正在尝试侧面导航和Angular 6/7。接下来的两张图片显示了我想要实现的目标。

侧面导航已折叠的应用程序：

侧面导航扩展的应用程序：

简而言之：

• 可以通过按钮打开和关闭的侧面导航。
• 一个固定的工具栏的内容的上方。
• 可滚动的内容。

其基本结构如下，暗示这里。

<mat-sidenav-container>
  <mat-sidenav mode="side" opened>Sidenav content</mat-sidenav>
  <mat-sidenav-content>Main content, toolbar here</mat-sidenav-content>
</mat-sidenav-container>

一个最小的工作样本，可以发现在这里，在stackblitz。

我的问题：工具栏不粘滞，在我开始滚动时会与内容一起滚动。

我的问题：如何使工具栏停留在顶部而不与内容一起滚动？

注意：侧面导航本身是固定的，因为它具有fixedInViewport="true"。

我需要创建一个带有2个简单行的页脚，分别是公司名称和年份。这是我的html片段，

<mat-toolbar color="primary" style="height: 176px">
  <span>Company name</span>
  <span>Copyright ©2019</span>
</mat-toolbar>

因此，公司名称必须位于中心（垂直和水平），并且版权应低于公司名称。

我有一个容器，里面有一个元素。我希望能够将元素拖动到容器内的另一个位置，并查看新的x和y坐标（其中x = 0和y = 0是容器的左上角）。

我在https://stackblitz.com/edit/material-6-mjrhg1上设置了一个基本的stackblitz ，但它不会在控制台中显示整个事件对象（“对象太大”）。在我的实际应用程序中，我可以浏览整个事件对象，但找不到描述新x和y位置的任何属性。

基本设置是这样的：

<div style="height: 200px; width=200px; background-color: yellow" class="container">
  <div 
    style="height: 20px; width: 20px; background-color: red; z-index: 10" 
    cdkDrag 
    cdkDragBoundary=".container"
    (cdkDragEnded)="onDragEnded($event)">
  </div>
</div>

我也尝试了其他一些事件，但是cdkDragEnded对我来说最有意义。

任何想法要检查哪些属性以查找x和y坐标，还是应该使用其他事件/方法？