标签: angular-material

我有一个mongoose连接到包含集合中的Date对象的数据库.我想使用Angular Material的DatePicker控件查看这些Date对象.Date对象遵循ISO字符串格式.

这是一段代码:

<md-datepicker 
     ng-model="license.expirationdate" md-placeholder="Enter date">
</md-datepicker>    

我收到以下错误:

在ng-model为md-datepicker必须是一个日期实例.

在研究时,我发现你可以使用过滤器来创建一个Date实例,但这对我不起作用 - >我收到一条错误消息,说明在使用简单过滤器时模型值是不可分配的.过滤器只是根据字符串输入返回一个新的Date对象.

如何在仍然允许ng-model更改的情况下将字符串格式化为Date对象？

编辑:mongoose var的架构Schema = mongoose.Schema;

var Schema = mongoose.Schema;

var modelschema = new Schema({
    name : String,
    licensetype : String,
    activationcount : Number,
    expirationdate: Date,
    key : String
})

这是填充模式的快速路由

app.post('/licenses', function (req, res) {

    console.log(req.body.expirationDate);
    License.create({

        name: req.body.licenseName,
        licensetype: req.body.licenseType,
        activationcount: 0,
        expirationdate: req.body.expirationDate,
        key: "123456"
    }, function (err, license) {

        if (err) { …

问题:

在量角器中定位虚拟中继器的规范/首选方法是什么？

故事:

在Angular Material设计中,有一个虚拟转发器,借助动态重用视口区域中可见的行,有助于提高渲染性能.样品:

<div class="md-virtual-repeat-offsetter" style="transform: translateY(0px);">
    <div md-virtual-repeat="item in ctrl.dynamicItems" md-on-demand="" class="repeated-item ng-binding ng-scope flex" flex="">0</div>
    <div md-virtual-repeat="item in ctrl.dynamicItems" md-on-demand="" class="repeated-item ng-binding ng-scope flex" flex="">1</div>
    <div md-virtual-repeat="item in ctrl.dynamicItems" md-on-demand="" class="repeated-item ng-binding ng-scope flex" flex="">2</div>
</div>

目前,我必须使用by.css定位技术:

$$('[md-virtual-repeat="item in ctrl.dynamicItems"]');

奖金问题:

有没有办法让它by.repeater也可以使用md-virtual-repeat？

角度材料中的text-align md-grid-tile不起作用.

<md-grid-tile>{{video.created}}</md-grid-tile>
<md-grid-tile>{{video.code</md-grid-tile>

<md-grid-tile style="text-align: left;">
    {{ video.title }}
</md-grid-tile>

<md-grid-tile>{{video.playtime}}</md-grid-tile>

我想对齐这样的文字:

我想要的是什么

但在md-grid-tile中的文本对齐不起作用:(

我该怎么做？

根据Github的讨论,无法定位标准对话框(api),但可以定位面板对话框(api).

一个简化的演示表明,这是真的:

var position = this._mdPanel.newPanelPosition().bottom(0).right(0);

的角材料文档显示方法,其允许相对于所述点击的元素的定位(或任何传入).但是,我无法让它工作.

var target = el.target;
var position = this._mdPanel.newPanelPosition().relativeTo(target); 

在用于硬值传递.top()和.right(),例如,允许相对于视定位.但是,我无法获得相对于被点击元素的定位.这应该怎么样？

我正在构建一个应用程序,但我想保持一致的颜色方案,可以通过设置更改,所以我使用材料(2)与角度(2 +),但我不知道如何获得不直接的元素的配色方案提供了为它们着色的能力,color="primary"因此我试图弄清楚如何获得我的Material 2主题使用的颜色/颜色方案.我希望它在主题发生变化时进行更改,例如我的导航栏将适应主题更改,因为它设置为

<mat-toolbar color="primary" class="fixed-navbar mat-elevation-z10">

但是材质2中的网格元素并没有采用相同的参数,所以我试图用足够接近的颜色来设置它的样式,或者根本不匹配它(并且它不会适应主题变化),如下所示:

我希望它与主题垫匹配颜色,这是在这里(并在导航栏设置中选择的选项上更改)

@import '~@angular/material/theming';

@include mat-core();



$candy-app-primary: mat-palette($mat-red);
$candy-app-accent:  mat-palette($mat-deep-orange, A200, A100, A400);
$candy-app-warn:    mat-palette($mat-red);
$candy-app-theme: mat-dark-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
.default {
  @include angular-material-theme($candy-app-theme);
}
.light {
  $light-primary: mat-palette($mat-blue, 200,300, 900);
  $light-accent:  mat-palette($mat-light-blue, 600, 100, 800);
  $light-warn:    mat-palette($mat-red, 600);
  $light-theme: mat-dark-theme($light-primary, …

我使用Angular material@5.0.0-rc.2在mat-table中的每一行添加了EDIT,DELETE和DETAILS按钮.所有按钮都正常工作但是,*我收到错误"无法读取未定义的属性'模板'和*每按一次按钮,所有内容都显示在同一页面上

itemlist.component.html

<mat-table #table [dataSource]="dataSource">
  <ng-container matColumnDef="name">
    <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
    <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="description">
    <mat-header-cell *matHeaderCellDef> Description </mat-header-cell>
    <mat-cell *matCellDef="let row"> {{row.description}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="actions">
    <mat-cell *matCellDef="let row">
      <button mat-button (click)="showDetails(row)">DETAILS</button>
      <button mat-button (click)="editItem(row)">EDIT</button>
      <button mat-button (click)="deleteItem(row)">DELETE</button>
    </mat-cell>
  </ng-container>

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

itemlist.component.ts

export class ItemListComponent {
  @Input() dataSource;
  displayedColumns = ['name', 'description', 'actions'];

  @Input() items: Item[];
  @Output() onEdit = new EventEmitter<Item>();
  @Output() onShow = new EventEmitter<Item>();
  @Output() onDelete …

如何从mat-selection-list中选择make single复选框.类似于单选按钮,它从值组中接受一个值.

node_modules/@angular/material/button-toggle/typings/button-toggle.d.ts(136,20)中的错误:

错误TS2315:类型'ElementRef'不是通用的.

node_modules/@angular/material/button-toggle/typings/button-toggle.d.ts(154104):

错误TS2315:类型'ElementRef'不是通用的

我正在尝试安装材料,但看起来这是错误的.

数据:

Angular CLI: 1.7.4
Node: 9.11.1

我在我的项目中使用角度材质,我使用Mat-Table为每个表渲染1000个产品/行.当表格改为分页(我们使用后端分页)到1000行时,性能变得非常慢,我甚至无法在文本框中写入.

我试图调试问题,所以我把日志放在一个列模板上,这样我就可以看到渲染是如何工作的.

即使我将鼠标悬停在表格标题上,我也看到它会重新呈现所有行.是否有可能将变更检测控制为ChangeDetectionStrategy.OnPush

我正在使用 Angular 材质对话框的 Angular 6 应用程序

• 我试图在我的数据成功发送到服务器后成功关闭对话框，

我用过 this.dialogRef.close(0); 或 this.dialogRef.close(0); 或 this.dialogRef.close(); 但它仍然不起作用

我把我的代码放在下面

组件1.ts

let NewRegDialog = this.dialog.open(NewRegistrationComponent, {

  width: '750px',
  height: '500px',
  //disableClose: true,
  data: {
    email : email,
    regType : regType,
  },
});

NewRegDialog.afterClosed().subscribe(result => {

  if(result == 1){
    this.dialogRef.close('signup');
  }else{
    alert('Login failed') ;
    });

组件2.ts

    import { Component, OnInit , Inject } from '@angular/core';
    import {  MatDialog  , MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';


   ... .. 
   .. .. 

      constructor( private restapi: ServicesService , private dialog: MatDialog …