标签: angular-material2

我无法找到如何使Angular Material Tab组件居中.

可以在这里看到:https: //material.angular.io/components/tabs/overview

我认为甚至还有一种方法可以做到这一点,目前还不清楚该做什么.

以下是文档的屏幕截图.属性是什么意思？它是在HTML中还是需要在打字稿中设置？

我将衷心感谢您的帮助.

我正在使用Angular 2,Angular Material,我愿意在md菜单中显示更多数据,因此,我需要将md-menu的max-width设置为更高的值.其默认值为280px.

    <img src="/assets/images/ic-notifications.png" [mdMenuTriggerFor]="appMenu"/> 
    <md-menu #appMenu="mdMenu"  [overlapTrigger]="false" yPosition="below" xPosition="before" class="notifications-dropdown">
        <button md-menu-item >
           <div class="row notification-row"> 
             <div>
               <span class="image-container"> Option 1 </span>
             </div>
           </div>
        </button>
    </md-menu>   

在CSS文件中,我这样做:

.mat-menu-panel.notifications-dropdown {
    max-width:none;
    width: 100vw; 
    margin-left: -8px;
    margin-top: 24px;
    overflow: visible;
}

.notification-row{
    width: 424px;
}

在控制台中,我可以识别设置默认值的类:max-width:280px;当我在控制台中编辑它时,它工作得很好,但即使我尝试在我的CSS代码中覆盖它,我也无法做到这一点.我试过这个,还:

.mat-menu-panel{
    max-width: 600px;
} 

还有这个:

.cdk-overlay-container .mat-menu-panel{
     max-width:600px;
    width: 100vw;
    margin-left: -8px;
    margin-top: 24px;
}

如何覆盖此默认值？

我有一些字符串数组,我希望将每两个字符串放在一起使用ng.这是我尝试的内容:

<div class='row wow fadeInUp' *ngFor='let index of myArray;let i = index;'>
     <div class='col-md-6'>
         <md-card>
            <md-card-header>
               <md-card-title>
                 {{index}}
               </md-card-title>
             </md-card-header>
          </md-card>
     </div>
     <div class='col-md-6' *ngIf='i+1 < myArray.length'>
         <md-card>
            <md-card-header>
               <md-card-title>
                 {{myArray[i+1}}
               </md-card-title>
             </md-card-header>
          </md-card>
    </div>
</div>

但是,当我添加新元素时,它复制了pervios元素,我真的不觉得它的原因是什么,所以如何用ngFor在每行中添加两个元素

我的Angular Material 2自动填充字段存在问题.

这是我的设置:

hardwareCreate.component.ts

myControl: FormControl = new FormControl();
availableFirmware = [];
filteredFirmware: Observable<any[]>;
selectedFirmware = null;
selectedFirmwareName = '';



this.availableFirmware = [];

    this.terminalService.getFirmware().subscribe(firmware => {
      this.availableFirmware = firmware.firmware;
    });
    this.filteredFirmware = this.myControl.valueChanges
    .pipe(
      startWith(''),
      map(val => this.filterFirmware(val))
    );

filterFirmware(val: any): any[] {
    return this.availableFirmware.filter(firmware => {
      return firmware.name.toLowerCase().indexOf(val.toLowerCase()) > -1;
    });
  }

hardwareCreate.component.html

<div class="form-group">
        <mat-form-field class="example-full-width">
            <input type="text" placeholder="Firmware auswählen" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto1" [(ngModel)]="selectedFirmwareName">
            <mat-autocomplete #auto1="matAutocomplete">
                <mat-option *ngFor="let firmware of filteredFirmware | async" [value]="firmware._id"> …

我正在开发一个网站,我正在使用Angular Material的Data Table组件.我希望用户能够通过向上和向下拖动行来为每一行设置某种优先级.类似于jQuery的数据表.我无法在文档中找到使用拖动事件重新排序的支持.如何在为项目添加最少依赖项的同时实现此功能？

我正在使用角度材料6,我在mat-form-field mat-error中显示错误,当在mat-form-field之后移动到正确显示的mat-error时.

不工作代码:

 <mat-form-field>
<input matInput type="time" formControlName="ToTime"/> <mat-error *ngIf="DaterForm.get('ToTime').hasError('InValidToTime')">FromTime Should be less than ToTime if choose a same date</mat-error>
     </mat-form-field>

工作正常:

 <input matInput type="time" formControlName="ToTime"/> </mat-form-field>
 <mat-error *ngIf="DaterForm.get('ToTime').hasError('InValidToTime')">FromTime Should be less than ToTime if choose a same date</mat-error>

有人解释了为什么不在该控制范围内工作.

现场演示: stackblitz

我们正在使用Angular 6材料开发我们的应用程序.我们有一个具有自动完成功能的选择框.我确实需要对我的选择框进行验证,因此,当用户搜索选项并且他/她不选择任何选项但将搜索词保留在选择框内时,因为只需要验证选择框,我的表单就会被发布到API.我想要实现的是不允许用户发布表单,除非他/她选择其中一个选项而不仅仅指定搜索词.我该如何实现这一目标？

<mat-form-field>
   <input matInput placeholder="Pick one" aria-label="pick one" [matAutocomplete]="auto" [formControl]="form.controls['SELECTBOX_VALUE']">
      <mat-autocomplete #auto="matAutocomplete">
           <mat-option *ngFor="let option of myOptions | async" [value]="option.name"> <span>{{ option.name }}</span> </mat-option>
            </mat-autocomplete>
</mat-form-field>
<small *ngIf="!form.controls['SELECTBOX_VALUE'].valid && form.controls['SELECTBOX_DEGER'].touched" class="mat-text-warn">Please select.</small>

ngOnInit() {
    this.form = this.fb.group({
        ... some other fields
        SELECTBOX_VALUE: [null, Validators.required]
    });

这是我自动编译的过滤器代码,这非常简单

this.form.get('SELECTBOX_VALUE').valueChanges
        .pipe(
            startWith(''),
            map(option => secenek ? this.doFilter(option) : this.options.slice())
        );

doFilter (name: string) {
    return this.myOptions.filter(option =>
        option.name.toLowerCase().indexOf(name.toLowerCase()) === 0);
}

我有一个以引导模式形式实现的角度材料 2 日期选择器：

<div class="modal-dialog modal-lg">
  <div class="modal-content">
    <div class="modal-header">
      <h4 class="modal-title">{{title}}</h4>
    </div>
    <div class="modal-body"> 
        <div class="timeline-cal">
            <input class="date-field" [mdDatepicker]="picker" placeholder="Choose a date">
            <md-datepicker-toggle mdSuffix [for]="picker"></md-datepicker-toggle>
            <md-datepicker #picker></md-datepicker>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn grey-btn pull-right"     (click)="cancel()">Cancel</button>
        </div>
    </div>
</div>

但是，单击按钮后，日期选择器不会在模态对话框本身中打开，而是在后台打开。我试过这个，但没有帮助：

.mat-datepicker-content{    z-index: 1200}

平台：Ubuntu 14.0.1 NPM 版本：4.6.1

我有一个 Angular 2 应用程序，我试图在其中使用 Material Radio Buttons。我已经使用以下命令安装了它们：

npm i @angular2-material/radio

我在模块中添加了以下代码：

import { Component } from '@angular/core';
import { FormControl, FormGroup, FormBuilder, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { MdRadioModule } from '@angular2-material/radio';

以下是 .html 文件的内容（中断）：

<md-radio-group>
          <md-radio-button value="1">Option 1</md-radio-button>
          <md-radio-button value="2">Option 2</md-radio-button>
        </md-radio-group>

当我运行应用程序时，我在浏览器的控制台中出现以下错误并且我的应用程序在那里中断：

nhandled Promise rejection: Template parse errors:
'md-radio-group' is not a known element:
1. If 'md-radio-group' is an Angular component, then verify that it is part of …

我想使用角度材料设计的 Angular 2+实现自动完成,除非他们输入至少1个字母,否则不应出现选项.

默认情况下,即使输入为空,自动完成也可在焦点上切换,因此我想更改此行为.

我试图在mat-autocomplete元素上添加一个条件*ngIf="inputField.value",以便仅在输入有值时显示选项,但它返回错误:

错误:尝试打开未定义的实例mat-autocomplete.确保传递给的id matAutocomplete是正确的,并且您尝试在ngAfterContentInit挂钩后打开它.

此外,我试图[matAutocomplete]="auto"在输入字段中添加一个条件,但它也返回错误.

我注意到,正在显示的自动完成选项时,元素cdk-overlay-container和mat-autocomplete-panel正在密切之前创建</body>,他们的链接断开与原部件,因此它通过CSS隐藏困难.

你有想法怎么做吗？

请遵循Stackblitz上的代码.

谢谢!