我是AngularJS的新手,所以请耐心等待.我正在使用Angular Material Design,我很难找到有效做响应网格的方法.
请在下面的代码中查看我的评论:
<div layout="row">
<div layout="row" flex="75" layout-sm="column" class="ptn-info-grid" layout-margin> <!-- USING ROW FOR DESKTOP AND COLUMN FOR MOBILE DEVICES -->
<div layout="column" flex="66"> <!-- I want this div occupy 2/3 of screen in Desktop but change to 100 in mobile devices (but stays in 66) -->
<div layout="row" layout-sm="column">
<div class="ptn-info-grid-item" flex>1</div>
<div class="ptn-info-grid-item" flex>2</div>
</div>
<div layout="row" layout-sm="column">
<div class="ptn-info-grid-item" flex>3</div>
<div class="ptn-info-grid-item" flex>4</div>
</div>
</div>
<div layout="column" flex="32"> <!-- I want this div …我正在开发一个POC应用程序,我正在努力让MdDialog组件正常运行.有没有人有一个传递给MdDialogopen方法的工作示例？
Angular 2.0:https: //github.com/angular/angular
Angular 2材料:https: //github.com/angular/material2
我安装了Angular Material Design.现在我尝试在app.module.ts文件中添加:
import { MaterialModule } from '@angular/material';
我应该在一节中解释:imports: []？加载所有材料实体.
我试过了:imports: ['MaterialModule']但它已被弃用了
我有2个组件.两者都有mat-table和paginator,并且分页对一个组件起作用,而不是为另一个组件工作,尽管代码类似.下面是我的html:
<div class="mat-elevation-z8">
<mat-table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="col1">
<mat-header-cell *matHeaderCellDef mat-sort-header> Column1 </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.col1}} </mat-cell>
</ng-container>
<ng-container matColumnDef="col2">
<mat-header-cell *matHeaderCellDef mat-sort-header> Column2 </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.col2}} </mat-cell>
</ng-container>
<!-- Different columns goes here -->
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;">
</mat-row>
</mat-table>
<mat-paginator #scheduledOrdersPaginator [pageSizeOptions]="[5, 10, 20]"></mat-paginator>
</div>
以下是我在component.ts中的代码:
dataSource: MatTableDataSource<any>;
displayedColumns = ['col1', 'col2', ... ];
@ViewChild('scheduledOrdersPaginator') paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
ngOnInit(): void {
// Load data
this.dataSource = new MatTableDataSource(somearray);
this.dataSource.paginator = …在安装Angular Material之后尝试进行编译时，我遇到了一系列警告（无论是直接来自npm还是通过，ng add @angular/material以及是否选择使用动画）。
它可以正常工作而没有任何警告或问题。有人可以帮助我吗？
以下是警告：
git:(master) ? ng serve
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
Date: 2019-06-02T16:53:30.127Z
Hash: 790c60ed1be271555fcc
Time: 13875ms
chunk {main} main.js, main.js.map (main) 10.4 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 237 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 181 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 6.73 MB …我刚刚将一个应用程序从 Angular 11.2.7 迁移到 Angular 12。一切运行良好，除了当我开发和使用“ng serve”时，重建时间现在要慢得多，以至于令人沮丧。
我在 M1 iMac 上，使用节点 16.1.0，这是值得的。
在我转向 Angular 12 之前，机器在开发重建（亚秒级）时闪电般快速。现在如果我只更改一行代码，即使我只更改控制台日志中的一个字母，构建时间为 23 秒，大约 22其中的几秒钟被“阶段：密封”占用。
我还注意到，即使在 ng 服务时，现在一切都从缩小的“main.js”运行。我似乎记得版本 11 没有这样做，但在开发过程中运行了单个未缩小的组件。也就是说，ng每次我更改任何内容时，服务现在似乎都在做一些完整的生产构建。我认为这是缓慢的根本原因，但我不确定。
所以 。. .
在 Angular 12 中，我还应该使用 'ng serve' 进行开发吗？
迁移时是否需要设置一个选项，也许是关闭完全缩小的重建，以保持旧的构建速度？
无论如何，这个“密封阶段”是什么？对我来说，这听起来像是一个生产构建术语！
谢谢
约翰
我只是使用这样的简单输入容器
<md-input-container class="md-block" flex-gt-sm >
<label>Name</label>
<input md-maxlength="30" name="name" ng-model="name" />
</md-input-container>
输入字段表示先前输入的值,这些值模糊了一些重要的界面元素,在我的情况下也是非常必要的.有没有办法禁用这些建议？
我刚刚复制并粘贴了datePicker和输入的角度材料代码,但是我收到了datePicker的这个错误.
app.module
import {MaterialModule} from '@angular/material';
@NgModule({
imports: [
...
MaterialModule
]
<md-input-container>
<input mdInput placeholder="Rechercher" [(ngModel)]="filterHistorique">
</md-input-container>
<md-input-container>
<input mdInput [mdDatepicker]="picker" placeholder="Choose a date">
<button mdSuffix [mdDatepickerToggle]="picker"></button>
</md-input-container>
<md-datepicker #picker></md-datepicker>
这是我在浏览器中出现的错误:
无法绑定到'mdDatepicker',因为它不是'input'的已知属性如果'md-datepicker'是Angular组件,则验证它是否是此模块的一部分.2.如果'md-datepicker'是Web组件,则将"CUSTOM_ELEMENTS_SCHEMA"添加到此组件的'@NgModule.schemas'以禁止显示此消息.("[错误 - >]
错误是针对datepicker,当我删除它时,错误消失
如何在事件发生时选择特定选项卡？
我尝试[selectedIndex]="selectedTab"更改selectedTab所需的选项卡索引,但在加载选项卡后它似乎不起作用...
我想在使用md-select选择值时在typescript中调用函数.在材料设计中用于此目的的属性是什么？
<md-select placeholder="State">
<md-option *ngFor="let state of states" [value]="state.code">{{ state.name }}
</md-option>