标签: angular-material

我们正在为我们的应用使用Angular Material表:

https://material.angular.io/components/table/overview

<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>

你能否展示如何在鼠标悬停上突出显示一行？

我研究了 Angular 9 中的新 i18n 功能。https://angular.io/guide/i18n

如何翻译 TypeScript 中的文本，例如 SnackBar 消息？

旧的角度/材料具有这两个模块。但是 angular/material 9.1.1 版本没有这两个模块。我得到以下错误。任何人都知道如何导入这两个模块

Uncaught (in promise): Error: MatDatepicker: No provider found for DateAdapter. You must import one of the following modules at your application root: MatNativeDateModule, MatMomentDateModule, or provide a custom implementation.
Error: MatDatepicker: No provider found for DateAdapter. You must import one of the following modules at your application root: MatNativeDateModule, MatMomentDateModule, or provide a custom implementation.

如标题中所述,我如何自定义这些元素？它们似乎使用透明背景,这在大多数背景调色板上很难查看

我有一些麻烦用AngularJS材料解决问题,我想知道是否有人知道为什么下面的代码:

<md-tabs layout-fill >

    <md-tab id="tab1">
        <md-tab-label>Item One</md-tab-label>
        <md-tab-body>

            <md-list>
                <md-subheader class="md-no-sticky">3 line item</md-subheader>
                <md-list-item class="md-3-line" ng-repeat="item in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,50]">

                    <div class="md-list-item-text">
                        <h3>sdfs</h3>
                        <h4>sdfsd</h4>
                        <p>sdfsdf</p>
                    </div>
                </md-list-item>

            </md-list>
        </md-tab-body>
    </md-tab>

</md-tabs>

在firefox上生成这个.

而这对铬.

抱歉没有直接发布图片我没有足够的声誉.

这是非常令人沮丧的,我使用一个mean.js自耕农生成的应用程序,似乎无法得到角度材料启动和运行.我读了另一个关于Angularjs与材料设计问题的stackoverflow问题无法实例化模块ngMaterial.所以我更新了我的bower.json文件并运行了一个bower update和bower install.它仍然无法正常工作.在凉亭更新期间,bower给了我这条消息Unable to find a suitable version for angular, please choose one:,但我总是选择Angular 1.3.0或更高版本.
下面是我的bower.json的副本:

{
  "name": "colign",
  "version": "0.0.1",
  "description": "Full-Stack JavaScript with MongoDB, Express, AngularJS, and Node.js",
  "dependencies": {
    "bootstrap": "~3",
    "angular": "~1.3",
    "angular-resource": "~1.3",
    "angular-mocks": "~1.3",
    "angular-bootstrap": "~0.11.2",
    "angular-ui-utils": "~0.1.1",
    "angular-ui-router": "~0.2.11",
    "angular-material": "~0.10.0"
  }
}

下面是控制台错误消息:错误:[$ injector:modulerr]由于以下原因无法实例化模块ngMaterial:错误:[$ injector:nomod]模块'ngMaterial'不可用!您要么错误拼写了模块名称,要么忘记加载它.如果注册模块,请确保将依赖项指定为第二个参数.

Angular config.js文件:

'use strict';

// Init the application configuration module for AngularJS application
var ApplicationConfiguration = (function() { …

我正在使用Angular Material 5.0.0-rc0Angular 5应用程序中的最新版本.我试图datepicker用Angular材料提供一系列日期,但我找不到任何关于它的文档.

我可以使用它是选择一个startDate或设置minDate和maxDate.这是HTML代码

<mat-form-field>
  <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker startView="year" [startAt]="startDate"></mat-datepicker>
</mat-form-field>

和TS代码

import {Component} from '@angular/core';

@Component({
  selector: 'datepicker-start-view-example',
  templateUrl: 'datepicker-start-view-example.html',
  styleUrls: ['datepicker-start-view-example.css'],
})
export class DatepickerStartViewExample {
  minDate = new Date(2000, 0, 1);
  maxDate = new Date(2020, 0, 1);
}

此代码可帮助我选择最小和最大日期范围内的一个日期,但不允许选择它们的范围.虽然使用第三方库可以解决这个问题,但它会有一个不同的UI,这将与我当前的应用程序的UI不同.请帮我解决这个问题.

我尝试在重新定位策略中为对话框滚动,但它对我不起作用.

const scrollStrategy = this.overlay.scrollStrategies.reposition();
const dialogRef = this.dialog.open( DialogOverviewExampleDialog, { scrollStrategy } );

完整的例子

我希望在滚动期间整个对话框(元素.cdk-overlay-pane)会移动

几乎是正确的行为

如何在角形材质中使用输入类型文件

嗨，我正在使用棱角材料进行设计。当我在角形材质站点上时，没有输入类型文件元素。任何人都知道这一点。

我有垫选择下拉列表如下

<mat-form-field>
   <mat-label>Gender</mat-label>
      <mat-select id="gender" required formControlName="gender">
         <mat-option id="Male" value="male"> Male </mat-option>
         <mat-option value="female"> Female </mat-option>
      </mat-select>
 </mat-form-field>

我正在尝试使用 Cypress 从该领域选择男性或女性。

cy.get('mat-select').click().select('Male')

使用上面的代码，我收到以下错误：

CypressError: cy.select() can only be called on a <select>. Your subject is a: <mat-select>

我需要一些帮助来解决这个问题，谢谢。

对我有用的代码。

cy.get('#gender').click().then(() => {
            cy.get('#male').click()
        })