标签: angular-material

我有一个嵌入 Angular MaterialMatSelect元素的组件。

在我正在编写的测试中，我需要模拟某个选项的选择，并确保selectionChange与该MatSelect元素关联的Observable实际触发。

到目前为止我的代码是

const mySelect: MatSelect = fixture.nativeElement.querySelector('#mySelect');
mySelect.value = 'new value';

但不幸的是mySelect.selectionChange，这并没有发出通知，因此我的测试工作。非常欢迎有关如何执行此操作的任何想法。

我正在使用垫子滑块让用户设置一个值。该(input)事件发射器用于显示值“活”（而鼠标仍下跌）。这是有效的。目前，(change)事件发射器用于识别用户何时选择了一个值（释放鼠标）。

第一个问题是，在与滑块的正常交互期间，更改事件会被触发两次：一次是在初次单击滑块时，第二次是在释放滑块时。我希望仅在释放滑块时触发事件，或者具有可以区分两个事件并仅对释放事件起作用的功能。

第二个问题是，当设置了滑块的新值时，我必须发出 HTTP 请求。我不希望这种情况经常发生，所以我想暂停一下。只有当经过一定时间并且没有发生新的更改事件时，我才想要发出 HTTP 请求。

我已经尝试用锁来实现这一点，但它不起作用，因为有时只触发一个更改事件（例如，单击滑块而不是拖动它时），然后错误地翻转了锁定变量和锁定机制由于倒置变量而不再工作。

有没有办法解决这些问题并实现我想要的？

我想对 mat-menu 的内容应用动态样式。我知道我可以使用panelClass来分配一个类，但我的类是动态的。

对于这种情况，Angular 具有[ngStyle]或仅[style.attribute]绑定，但这不适用于 mat-menu（或其他叠加层），它仅适用于直接渲染的元素。

我正在寻找像panelStyle这样的东西，它允许我直接在包含 mat-menu 的面板上动态设置样式。

这是一个代码示例，其中 panelClass 允许我设置一些 css，但只有静态一个，ngStyle 没用。

<mat-menu [ngStyle]="{'background-color': colorVariable }" panelClass="some-static-class-works">

我在找什么：

<mat-menu [panelStyle]="{'background-color': colorVariable }">

我有一个 Angular Material 工具提示，用于在将鼠标悬停在表格元素中的列单元格上时显示信息。除了这个功能之外，我还要求用户能够选择文本并从表格元素中突出显示它，以便他们可以复制和粘贴它。

因为我使用 Angular Material 工具提示和 ::ng-deep 将它显示在列的顶部，它会在现有的 DOM 元素上创建一个叠加层，因此我无法选择列中的文本。有没有办法解决？我必须编辑 matToolTip 类吗？

谢谢！

我的最终解决方案是使用更原生的工具提示元素，这些元素将成为 DOM 的一部分，并且不会阻止用户选择文本，但这不是那么漂亮，所以这是我最后的手段。

edit.component.html

import { MatTooltipModule } from '@angular/material/tooltip';

<ng-container matColumnDef="DepartmentName">
        <th mat-header-cell *matHeaderCellDef></th>
        <td
          mat-cell
          *matCellDef="let row"
          [matTooltip]="getTooltipMissingDepartments(row)"
          matTooltipClass="missing-mds-tooltip"
        >
          {{ row?.DepartmentName }}
        </td>
      </ng-container>

edit.component.scss

::ng-deep .missing-mds-tooltip {
  white-space: pre-line;
}

用户应该能够将鼠标悬停在该列上并查看工具提示，并突出显示该列的表格中的文本。

我在我的 Angular7 应用程序中使用了一个带有 firebase 的 mat-table 并成功填充了它。我想添加一个自动递增的序列号。

我的代码的Html：

<mat-table #table2 [dataSource]="dataSource2" matSort>
 <ng-container matColumnDef="sn">
 <mat-header-cell *matHeaderCellDef mat-sort-header> SN. </mat-header-cell>
 <mat-cell *matCellDef="let element; let i = index;">{{i+1}}</mat-cell>
  </ng-container>
 <ng-container matColumnDef="description">
 <mat-header-cell *matHeaderCellDef mat-sort-header> Description </mat-header-cell>
    <mat-cell *matCellDef="let item"> {{item.description}} </mat-cell>
  </ng-container>
 <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" [pageSize]="5" showFirstLastButtons></mat-paginator>

分页问题

• 当我转到下一页时，索引再次从一个开始。
• 如果我每页显示 5 个项目，那么在转到下一页后，它从一个而不是 6 个开始。

我试图通过虚拟滚动组件加载 20 个项目，但我在页面加载后立即看到 34 个项目，根本不进行任何滚动。我弄错了 css 吗？或者我忘记了控件上的某些设置？该项目位于此处。

我试图将Ng-repeat传递给我,$mdDialog但我没有找到关于如何这样做的文档.我一直在指这个堆栈,但我没有运气将图像传递给模态.

在控制台中我收到一个错误说:

TypeError: Cannot read property 'element' of undefined

控制台错误的原因是什么,而不是将图像传递给模态？

HTML

<md-grid-tile 
    ng-repeat="image in imageBucket.images"
    md-rowspan="{{image.row}}"
    md-rowspan-gt-lg="{{image.rowgtlg}}"
    md-colspan="{{image.col}}"
    md-colspan-gt-lg="{{image.colgtlg}}"
    class="white" >
    <md-button 
        class="" 
        ng-click="showAdvanced($event, image)" 
        flex="100" 
        flex-gt-md="auto">
        <img 
            aria-label="kpinsonstairs" 
            class="img-responsive md-whiteframe-6dp" 
            src="{{image.src}}" 
            alt="Gallery Picture">
            <md-grid-tile-footer>
                <h3>{{image.title}}</h3>
            </md-grid-tile-footer>
    </md-button>
</md-grid-tile>

使用Javascript

(function () {

  'use strict';

    angular
        .module('resonance.gallery.controllers')
        .controller('GalleryOneController', GalleryOneController);

    GalleryOneController.$inject = [
        '$scope',
        '$mdDialog',
        'ImageService'
    ];

    function GalleryOneController($scope, $mdDialog, ImageService) {

      ImageService.success(function(data) {
        $scope.imageBucket = data;
      });


      $scope.showAdvanced = function(ev, image) {

        $mdDialog.show({
          clickOutsideToClose:true,
          controller: function($mdDialog) …

我使用Angular Material 1.1版

我想改变md-autocomplete组件的占位符文本的样式.但是,我无法选择占位符作为与其样式一起使用的分隔元素.

这里你可以看到一个codepen来说明问题.

我尝试了以下口述代码,但它们没有用

md-autocomplete{
  color: red !important;
}
md-autocomplete-wrap{
  color: red !important;
}
input{
  color: red !important;
}

有什么办法吗？

我有一个ui-router模板md-tabs,其中包含一些选项卡是静态的,其他选项卡是通过ng-repeat迭代数据模型的给定数组动态创建的.

在这些动态创建的选项卡中,有三个按钮可以执行以下操作

• 将标签向左移动一个位置
• 将标签向右移动一个位置

的move tab按钮调用同一控制器内的功能.$index当前显示的选项卡的值以及所需的方向(-1向左1移动,向右移动)将传递给该功能.

因此视图的HTML片段如下所示:

<md-content flex layout-padding>
    <md-card>
        <md-tabs md-dynamic-height md-border-bottom md-autoselect md-swipe-content md-selected="selectedTab">
            <md-tab id="{{ 'tab' + $index }}" data-ng-repeat="tab in tabs track by $index">
                <md-tab-label>Tab {{ $index + 1 }}</md-tab-label>
                <md-tab-body>
                    <md-card-title>
                        <md-card-title-text>
                            <div flex layout="row">
                                <div flex><span class="md-headline">Tab {{ $index + 1 }}</span></div>
                                <div flex align="right">
                                    <md-button ng-click="moveTab(-1, $index)">Move tab left</md-button>
                                    <md-button ng-click="moveTab(1, $index)">Move tab right</md-button>
                                </div>
                            </div>
                        </md-card-title-text>
                    </md-card-title> …

我有一个角度材料网格列表.它由一行(跨越4列)和许多"项"行组成,每行包含4个图块.这个 codepen说明了这个问题.

每个项目都应该有自己的行,即对于每个项目,应该渲染4个图块.

要做到这一点,我不能把它ng-repeat放在一个瓷砖上,因为这只会重复一个瓷砖.我尝试将4个ng-repeat磁贴包装在包含它的div中,但这会搞砸布局(在Codepen中:取消注释div).

这是我的代码:

<md-grid-list md-cols="4" md-row-height="4:1" md-gutter="8px">
    <md-grid-tile class="gray" md-colspan="4">
      <div layout="column" layout-fill>this is a static row</div>
    </md-grid-tile>
    <div ng-repeat="item in appCtrl.items">

      <md-grid-tile class="gray">
        <div layout="column" layout-fill>this row</div>
      </md-grid-tile>
      <md-grid-tile class="gray">
        <div layout="column" layout-fill>should repeat</div>
      </md-grid-tile>
      <md-grid-tile class="gray">
        <div layout="column" layout-fill>for every</div>
      </md-grid-tile>
      <md-grid-tile class="gray">
        <div layout="column" layout-fill>item</div>
      </md-grid-tile>
    </div>
</md-grid-list>

关于如何使用重复的瓷砖正确渲染网格列表的任何想法？