标签: angular-material

错误：模块“@angular/material”没有导出成员“...”

我创建一个自定义 Angular 材质模块，material.module.ts 文件，并在此文件中导入以下 Angular 材质 UI 组件，如下所示。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import {
   MatButtonModule,
   MatToolbarModule,
   MatIconModule,
   MatBadgeModule,
   MatSidenavModule,
   MatListModule,
   MatGridListModule,
   MatFormFieldModule,
   MatInputModule,
   MatSelectModule,
   MatRadioModule,
   MatDatepickerModule,
   MatNativeDateModule,
   MatChipsModule,
   MatTooltipModule,
   MatTableModule,
   MatPaginatorModule
} from '@angular/material';

@NgModule({
   imports: [
      CommonModule,
      MatButtonModule,
      MatToolbarModule,
      MatIconModule,
      MatSidenavModule,
      MatBadgeModule,
      MatListModule,
      MatGridListModule,
      MatFormFieldModule,
      MatInputModule,
      MatSelectModule,
      MatRadioModule,
      MatDatepickerModule,
      MatNativeDateModule,
      MatChipsModule,
      MatTooltipModule,
      MatTableModule,
      MatPaginatorModule
   ],
   exports: [
      MatButtonModule,
      MatToolbarModule,
      MatIconModule,
      MatSidenavModule,
      MatBadgeModule,
      MatListModule,
      MatGridListModule,
      MatInputModule,
      MatFormFieldModule,
      MatSelectModule,
      MatRadioModule,
      MatDatepickerModule,
      MatChipsModule,
      MatTooltipModule, …

Run Code Online (Sandbox Code Playgroud)

typescript angular-material angular angular12

作者

lucky-day

31
推荐指数

3
解决办法

6万
查看次数

Angular-material ng-click奇怪的边框高亮显示

我在使用AngularJS和Angular-Material时遇到问题.

看看下面的代码:

<div flex="100">
   <ul class="list-group">
       <li class="list-group-item cursorPointer" 
        ng-repeat="item in array" ng-click="selectItem(item)">
          {{item.name}}
       </li>
    </ul>
</div>

Run Code Online (Sandbox Code Playgroud)

li标签附加了一个ng-click功能,其中包含一些业务逻辑.问题是当你点击它时出现一个奇怪的边框(类似于用户选择高亮),我似乎无法弄清楚它来自哪里.

这似乎只出现在我对元素有一个ng-click指令时(span元素上的相同行为)

使用的版本:

AngularJS - 1.4.1

角度材料 - 0.9.4

Angular-Aria - 1.4.0

Angular-Animate - 1.4.1

Angular-UI-Boostrap - 0.9.0

Bootstrap - 3.2.0

JQuery - 2.1.4

有任何想法吗？请参阅此plnkr例如:http://plnkr.co/edit/60u8Ur？p = preview

css angularjs angularjs-ng-click angular-material

Rus*_*aul

2015 06-22

30
推荐指数

3
解决办法

2万
查看次数

Angular 5 Mat-grid列表响应

我用第6列创建了网格列表,我希望网格标题在小屏幕设备上占据100%的宽度.现在它也在小屏幕上创建了6列

预期:一个网格标题仅占移动设备的100%空间

angular-material angular angular5

Som*_*ami

lucky-day

30
推荐指数

5
解决办法

4万
查看次数

模板解析错误:'mat-icon'不是已知元素

我正在使用Angular CLI和角度材料v.5.2.5并尝试使用

垫图标按钮

但是控制台产生了这样的错误:

未捕获错误:模板解析错误:'mat-icon'不是已知元素...

如果我使用

垫募集按钮

一切正常,无法弄清楚如何解决这个问题

的index.html

 <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Todo</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"
    rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
  <app-root></app-root>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

main.ts

 import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

Run Code Online (Sandbox Code Playgroud)

app.module.ts

 import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from …

Run Code Online (Sandbox Code Playgroud)

angular-material angular

Vla*_*uta

lucky-day

30
推荐指数

6
解决办法

4万
查看次数

如何用角形材料实现经典的"粘性页脚"？

我认识到Angular Material的实施正在进行中,但我今天早上花了一些时间试图熟悉它.但是,我真的很难让演示中显示的概念在一个独立的站点中工作.

似乎当指令喜欢<md-toolbar>和<md-content>用于具有固定高度的容器时,它们工作得很好.我正在努力将它们扔进<body标签内,并且能够像本例中那样使用粘性页脚布局.

我尝试了很多变体,但是这里有一个例子,当从DOM中删除内容时它不起作用.当内容在那里时,它会超出视口,而页脚会像你期望的那样被放置.在Chrome和Firefox的最新版本中,此示例在删除内容时将页脚保持在底部,但在IE中这根本不起作用.在IE中,无论主要内容是否显示,页脚都会浮动在标题下方.

演示: http ://codepen.io/sstorie/pen/xbGgqb

<body ng-app="materialApp" layou-fill layout='column'>
    <div ng-controller="AppCtrl" layout='column' flex>
      <md-toolbar class='md-medium-tall'>
        <div class="md-toolbar-tools">
          <span>Fixed to Top</span>
          <span flex></span>
          <md-button class="md-raised" ng-click="toggleContent(!displayContent)">toggle content</md-button>
        </div>
      </md-toolbar>
      <main class='md-padding' layout="row" flex>
        <div flex>
        <md-card ng-if="displayContent" ng-repeat = "card in cards">
          {{$index}}
          {{card.title}}
          {{card.text}}
        </md-card>
        </div>
               <div flex>
        <md-card ng-if="displayContent" ng-repeat = "card in cards">
          {{$index}}
          {{card.title}}
          {{card.text}}
        </md-card>
        </div>
      </main>
      <md-toolbar class="md-medium-tall">
        <div layout="row" layout-align="center center" …

Run Code Online (Sandbox Code Playgroud)

angularjs material-design angular-material

Sam*_*rie

2014 12-29

29
推荐指数

4
解决办法

3万
查看次数

如何让Angular Material Design的<md-card>指令在IE中正确缩放成像？

我在material.angularjs.org网站上发布了这个可能的问题,但是想在这里发布这个以防万一有基于CSS的解决方案,我应该知道.

我正在尝试创建一个"砌体布局",其中我有多列不同尺寸的图像.我正在尝试使用卡片来保存每张图片,而在Chrome和Firefox中,它的工作方式与我预期的完全相同.卡片缩放到窗口(使用flex)并且图像缩放匹配卡片的大小.然而,在IE 11上,卡的高度似乎与图像的实际高度保持一致,即使它被缩小到较小的尺寸.我创建了一个Codepen来演示这个问题:

http://codepen.io/sstorie/pen/myJWxQ

  <body ng-app="materialApp" layout-fill>
    <div ng-controller="AppCtrl" layout='column'>
      <md-toolbar class='md-medium-tall'>
        <div class="md-toolbar-tools">
          <span>Fixed to Top</span>
        </div>
      </md-toolbar>
      <div class='md-padding' layout="row" flex>
        <div layout="row" flex>
            <div layout="column" ng-repeat="photoColumn in data.photos3p" flex>
                <md-card class="card" data-ng-repeat="photo in photoColumn">
                    <img ng-src="{{photo.path}}">
                </md-card>
            </div>
        </div>
      </div>
    </div>
  </body>

Run Code Online (Sandbox Code Playgroud)

...这里是我添加的唯一非物质CSS:

.card img {
  width: 100%;
  height: auto;
}

Run Code Online (Sandbox Code Playgroud)

这是在Chrome中运行的示例.请注意卡片的宽度和高度与图像有关:

在此输入图像描述

...但是这里的结果在IE11中看起来如何.您可以在IE中看到水平定向的图像向下缩放其高度以适应卡的宽度,但卡的高度不会随之缩小.它仍然是图像的高度.

在IE中您可以看到卡片的结果保留了图像的整个高度,即使它们按比例缩小也是如此.

是否有类似这样的CSS修复,或者它是如何<md-card>实现该指令的问题？

要清楚,我意识到这个图书馆正在进行中,到目前为止我很喜欢它.我对CSS不太满意,所以不确定这是否可以解决,或者我是否需要等待在材料代码中修复问题.

css angularjs material-design angular-material

Sam*_*rie

2014 12-29

29
推荐指数

1
解决办法

4万
查看次数

如何更改Angular Material中md-icon的颜色？

我开始在我的项目中使用Angular Material,我想知道如何更改内部的svg颜色am-button.

这是我的代码:

<md-button class="md-fab md-primary">
    <md-icon
        class="ng-scope ng-isolate-scope md-default-theme"
        style="height: 14px; width: 14px;"
        md-svg-src="img/material-icons/core/arrow-forward.svg"
    ></md-icon>
</md-button>

Run Code Online (Sandbox Code Playgroud)

我需要添加什么才能将svg的颜色从黑色变为白色,就像Google的按钮演示一样？("使用字体图标的图标按钮"部分)

angularjs angular-material

mar*_*375

2016 02-06

29
推荐指数

4
解决办法

5万
查看次数

如何使用材料角的分页器？

我是角色的新手,并试图在我的应用程序中实现分页.我正在尝试使用这个材料组件.

用下面的代码,我可以得到length,pagesize和pageSizeOptions在我的.ts文件

<md-paginator [length]="length"
              [pageSize]="pageSize"
              [pageSizeOptions]="pageSizeOptions"
</md-paginator>

Run Code Online (Sandbox Code Playgroud)

export class PaginatorConfigurableExample {

  length = 100;
  pageSize = 10;
  pageSizeOptions = [5, 10, 25, 100];

  }
}

Run Code Online (Sandbox Code Playgroud)

但是,当页面被更改时,我似乎无法触发更改上表中数据的功能.此外,我怎么使用nextPage,previousPage,hasNextPage,和hasPreviousPage方法呢？

pagination angular-material angular

Hei*_*erg

2019 02-07

29
推荐指数

6
解决办法

5万
查看次数

错误 TS2707 通用类型“??DirectiveDeclaration”需要 6 到 8 个类型参数

安装角度材料并将 app.module.ts 中的角度材料导入添加到项目后，我遇到了错误，并且到目前为止所有解决方案都不起作用。我的角度为 14，节点为 16。第一个错误，实际上要长得多：

Error: node_modules/@angular/cdk/a11y/index.d.ts:152:18 - error TS2707: Generic type '\xc9\xb5\xc9\xb5DirectiveDeclaration' requires between 6 and 8 type arguments.\n\n152     static \xc9\xb5dir: i0.\xc9\xb5\xc9\xb5DirectiveDeclaration<CdkAriaLive, "[cdkAriaLive]", ["cdkAriaLive"], { "politeness": "cdkAriaLive"; "duration": "cdkAriaLiveDuration"; }, {}, never, never, false, never>;\n                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\n\n\nError: node_modules/@angular/cdk/a11y/index.d.ts:175:18 - error TS2707: Generic type '\xc9\xb5\xc9\xb5DirectiveDeclaration' requires between 6 and 8 type arguments.\n\n175     static \xc9\xb5dir: i0.\xc9\xb5\xc9\xb5DirectiveDeclaration<CdkMonitorFocus, "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", ["cdkMonitorFocus"], {}, { "cdkFocusChange": "cdkFocusChange"; }, never, never, false, never>;\n                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\n\n\nError: node_modules/@angular/cdk/a11y/index.d.ts:208:18 - error TS2707: Generic type '\xc9\xb5\xc9\xb5DirectiveDeclaration' requires between 6 and 8 …

Run Code Online (Sandbox Code Playgroud)

node.js typescript angular-material angular

Ilz*_*lze

2022 12-05

29
推荐指数

2
解决办法

5万
查看次数

无法绑定到'matMenuTriggerFor',因为它不是'button'的已知属性

当我尝试测试角度分量时,我遇到以下错误:

运行jest测试时出错:

Can't bind to 'matMenuTriggerFor' since it isn't a known property of 'button'.

Run Code Online (Sandbox Code Playgroud)

这是我的HTML:

<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>`

Run Code Online (Sandbox Code Playgroud)

我"@angular/material": "6.1.0",在我的package.json中使用.我也进口的所有必要的材料依赖于beforeAll块下TestBed 我也试着更改按钮的特性matMenuTriggerFor来mat-menu-trigger-for.它没用.

请建议我如何修复此测试.

karma-jasmine jestjs angular-material angular

RV.*_*RV.

2018 06-16

28
推荐指数

2
解决办法

2万
查看次数