Questions tagged «angular-material»

Angular Material是Angular中Material Design的实现。不要将此标签用于AngularJS Material，这是旧AngularJS框架的Material Design实现。

10
Angular2材质对话框有问题-您是否将其添加到@ NgModule.entryComponents？
我正在尝试关注https://material.angular.io/components/component/dialog上的文档，但我不明白为什么会有以下问题？ 我在组件上添加了以下内容： @Component({ selector: 'dialog-result-example-dialog', templateUrl: './dialog-result-example-dialog.html', }) export class DialogResultExampleDialog { constructor(public dialogRef: MdDialogRef<DialogResultExampleDialog>) {} } 在我的模块中，我添加了 import { HomeComponent,DialogResultExampleDialog } from './home/home.component'; @NgModule({ declarations: [ AppComponent, LoginComponent, DashboardComponent, HomeComponent, DialogResultExampleDialog ], // ... 但是我得到这个错误。 EXCEPTION: Error in ./HomeComponent class HomeComponent - inline template:53:0 caused by: No component factory …
1
选择自举vs材质设计[关闭]
关闭。此问题不符合堆栈溢出准则。它当前不接受答案。 想改善这个问题吗？更新问题，使它成为Stack Overflow 的主题。 5年前关闭。 改善这个问题 我将使用AngularJS（完整堆栈）开始新项目。我的项目需要及时响应，我将从头开始创建模板。 因此，我需要建议是否选择Bootstrap 3（带角度指令）或布局的材料设计？ 如果有人可以列出两者的优缺点，我将不胜感激。
23
Angular + Material-如何刷新数据源（mat-table）
我正在使用一张桌子来列出用户选择的语言的内容。他们还可以使用对话框面板添加新语言。之后，他们添加了一种语言并返回。我希望刷新数据源以显示所做的更改。 我通过从服务获取用户数据并将其传递到refresh方法中的数据源中来初始化数据存储。 Language.component.ts import { Component, OnInit } from '@angular/core'; import { LanguageModel, LANGUAGE_DATA } from '../../../../models/language.model'; import { LanguageAddComponent } from './language-add/language-add.component'; import { AuthService } from '../../../../services/auth.service'; import { LanguageDataSource } from './language-data-source'; import { LevelbarComponent } from '../../../../directives/levelbar/levelbar.component'; import { DataSource } from '@angular/cdk/collections'; import { Observable …
14
有条件地应用指令
我正在使用Material 2添加md-raised-button。我只想在某些条件为真时才应用此指令。 例如： <button md-raised-button="true"></button> 另一个例子：我在plunker中创建了一个基本的动态反应形式。我正在使用formArrayName反应形式的指令用于控件数组。我只想formArrayName在特定条件为真时应用指令，否则不要添加formArrayName指令。 这是一个矮胖的链接。
15
垫子表排序演示不起作用
我正在尝试使mat-table排序在本地工作，尽管我可以使数据按预期显示，但是单击标题行并不会像在在线示例中那样进行排序（什么都没有发生）。我正在尝试使此演示在本地运行：https : //material.angular.io/components/sort/overview https://plnkr.co/edit/XF5VxOSEBxMTd9Yb3ZLA?p=preview 我已经使用Angular CLI生成了一个新项目，然后执行以下步骤：https : //material.angular.io/guide/getting-started 这是我的本地文件： app.module.ts import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { MatSort, MatTableModule } from '@angular/material'; import { AppComponent } from './app.component'; import { TableSortingExample } from './table-sorting-example'; @NgModule({ declarations: [ AppComponent, TableSortingExample, MatSort ], imports: [ …
14
角材料图标不起作用
我已经安装了用于角度的材料 我已在我的应用程序模块MatIconModule上导入（带有import { MatIconModule } from '@angular/material/icon';） 我已经在ngmodule导入下添加了它： @NgModule({ imports: [ //... MatIconModule, //... 我已经导入了所有样式表 而且我也将其导入了我的应用程序组件中，该组件实际上（正在尝试）使用它们（import {MatIconModule} from '@angular/material/icon';在其开头有另一行）。 但是实质图标仍然没有出现。 例如，使用以下行： <button mat-icon-button (click)="snav.toggle()"><mat-icon>menu</mat-icon></button> 我期待这样的事情： 但是我得到这个： 有任何建议吗？
3
Angular 2 ng for first，last，index loop
我正在尝试将本例中的第一次出现设置为默认值：plunkr 出现以下错误： Unhandled Promise rejection: Template parse errors: TypeError: Cannot read property 'toUpperCase' of undefined ("dButtonToggleGroup"> <md-button-toggle [ERROR ->]*ngFor="let indicador of indicadores; #first = first" value="indicador.id" [checked]="first">"): ng:///AppModule/HomeComponent.html@35:78 Parser Error: Unexpected token #, expected identifier, keyword, or string at column 31 in [let indicador of indicadores; #first = first] in …
4
我可以以编程方式在Angular / Angular材质中移动水平垫脚垫的步骤吗
我对Angular Material（使用Angular 4+）有疑问。说在组件模板中，我添加了一个<mat-horizontal-stepper>组件，并且在每个步骤中，<mat-step>我都有步进按钮来导航该组件。像这样 <mat-horizontal-stepper> <mat-step> Step 1 <button mat-button matStepperPrevious type="button">Back</button> <button mat-button matStepperNext type="button">Next</button> </mat-step> <mat-step> Step 2 <button mat-button matStepperPrevious type="button">Back</button> <button mat-button matStepperNext type="button">Next</button> </mat-step> <mat-step> Step 3 <button mat-button matStepperPrevious type="button">Back</button> <button mat-button matStepperNext type="button">Next</button> </mat-step> </mat-horizontal-stepper> 现在，我想知道是否可以删除每个步骤中的按钮，并将它们放置<mat-horizontal-stepper>在静态位置或什至外部的其他位置，<mat-horizontal-stepper>并且可以使用组件打字稿文件中的代码来回导航。给一个想法，我希望我的HTML是这样的 <mat-horizontal-stepper> <mat-step> Step 1 </mat-step> <mat-step> Step 2 …
9
Angular Material中的默认排序-排序标题
如何更改下面的“角度材料”代码，以便数据表按“名称”列排序，默认情况下按升序排序。必须显示箭头（指示当前分类方向）。 这是我要实现的目标： 原始代码： <table matSort (matSortChange)="sortData($event)"> <tr> <th mat-sort-header="name">Dessert (100g)</th> <th mat-sort-header="calories">Calories</th> <th mat-sort-header="fat">Fat (g)</th> <th mat-sort-header="carbs">Carbs (g)</th> <th mat-sort-header="protein">Protein (g)</th> </tr> <tr *ngFor="let dessert of sortedData"> <td>{{dessert.name}}</td> <td>{{dessert.calories}}</td> <td>{{dessert.fat}}</td> <td>{{dessert.carbs}}</td> <td>{{dessert.protein}}</td> </tr> </table> 我正在尝试类似的操作，但是不起作用（未显示箭头，未排序） <table matSort (matSortChange)="sortData($event)" matSortActive="name" matSortStart="asc" matSortDisableClear> 这是指向Plunker的链接
14
Angular 5 FormGroup重置不会重置验证器
我的页面上有一个表单，当我调用FormGroup.reset()它时，将forms类设置为，ng-pristine ng-untouched但FormControl.hasError(...)仍然返回true。我在这里做错了什么？ 模板 <form [formGroup]="myForm" (ngSubmit)="submitForm(myForm)"> <mat-form-field> <input matInput formControlName="email" /> <mat-error *ngIf="email.hasError('required')"> Email is a required feild </mat-error> </mat-form-field> <mat-form-field> <input matInput type="password" formControlName="password" /> <mat-error *ngIf="password.hasError('required')"> Password is a required feild </mat-error> </mat-form-field> <button type="submit">Login</button> </form> 零件 export class MyComponent { private myForm: FormGroup; private email: FormControl = …
8
如何在角度设置垫子桌子的宽度？
在我的mat-table中，这里有6列，当任何一列没有更多的单词然后看起来像Image-1，但是当任何一列有更多单词然后UI看起来像Image-2时，那么如何设置UI就像Image-1列中的第6个角中有更多单词？ 图片1 图片2 user.component.html <div class="mat-elevation-z8"> <table mat-table [dataSource]="dataSource"> <ng-container matColumnDef="userimage"> <th mat-header-cell *matHeaderCellDef> # </th> <td mat-cell *matCellDef="let element"> <img src="{{commonUrlObj.commonUrl}}/images/{{element.userimage}}" style="height: 40px;width: 40px;"/> </td> </ng-container> <ng-container matColumnDef="username"> <th mat-header-cell *matHeaderCellDef> Full Name </th> <td mat-cell *matCellDef="let element"> {{element.username}} ( {{element.usertype}} )</td> </ng-container> <ng-container matColumnDef="emailid"> <th mat-header-cell *matHeaderCellDef> EmailId …
4
角材料：MatDatepicker：找不到DateAdapter提供程序
我正在尝试在Angular Material中使用Datepicker组件。这是我的HTML代码： <input matInput [matDatepicker]="picker" placeholder="Choose a date" disabled> <mat-datepicker #picker disabled="false"></mat-datepicker> 但是，它对我不起作用，并且出现以下错误： 错误：MatDatepicker：未找到DateAdapter的提供程序。 错误消息告诉我，我需要导入MatNativeDateModule和MatDatepickerModule，但是我已经做到了。这是我从app.module.ts下面的导入代码： import { MatFormFieldModule, MatMenuModule, MatCheckboxModule, MatIconModule, MatDatepickerModule, MatNativeDateModule } from '@angular/material'; 还有什么我想念的吗？
7
将Bootstrap用于Angular和Material Design一起用于Angular
我正在使用此模板进行项目。 该模板是使用AngularJs和Bootstrap-UI（Angular的Bootstrap）编写的，我想包括一些材料设计元素，例如卡片和其他元素。 有可能这样做吗？推荐吗？我的事情是，我们已经喜欢这个模板及其许多元素了，但是Material Design拥有卡片，下拉菜单，带有标签动画的文本输入等，这些都是很棒的。 所以我的问题是： AngularJS + Angular的Bootstrap + Angular的材质设计=令人敬畏还是灾难？
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.