标签: angular-material2

我希望在md-tab-group的底部对齐标签,如下所示:

在材质1中可以使用md-tabs-align ="bottom".为此目的,材料2中是否有任何可用的东西？

这是我的代码:

<md-tab-group> 
    <md-tab label="Tab One"> 
        Tab One Contents 
    </md-tab> 
    <md-tab label="Tab Two"> 
        Tab Two Contents 
    </md-tab> 
</md-tab-group>

我正在尝试为 md-list 中的奇数/偶数行设置不同的背景。不确定这是否支持使用 Angular Material 2 - Md-list 组件，因为我没有看到任何关于此的文档。

我相信 angular 2 使用 ng-class-odd/ng-class-even 支持这一点

我正在尝试更改md-menu. 问题是 Angular Material 动态生成元素，我无法从我的 HTML 访问它们。

这是我的 DOM：

这是我的组件 HTML（md-menu生成那个 DOM）：

<md-toolbar color="primary">
  <h1>Logo</h1>
  <span class="spacer"></span>
  <img src="../../../images/avatar-default.png" class="avatar" [mdMenuTriggerFor]="userMenu" />

  <md-menu #userMenu="mdMenu">
    <button md-menu-item>{{username}}</button>
    <button md-menu-item>Log Out</button>
  </md-menu>
</md-toolbar>

我知道我可以使用 来div从全局样式中访问（在图片上选择的）.mat-menu-content {...}，但它会影响具有此类类的其他元素。而且我无法从组件 CSS 为这个 div 设置样式，因为该元素在组件范围之外。所以我试图找到从组件 CSS 更改此元素样式的方法，而不影响具有此类样式的其他元素。

如果有办法实现它，请告诉我。

我有一个复选框,它有一个(更改)函数,它将变量'isSelected'设置为change函数的event.checked值.现在我尝试在stackoverflow上的这个问题的帮助下测试它.但是,我觉得(更改)事件没有被触发,因为'isSelected'没有改变.我还尝试在(更改)之后触发的函数上使用spyOn,但这仍然返回该函数未被调用(当前测试).也许有人知道如何发现变化以及我做错了什么.这是我的代码:

import { Component, Input, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-intents-checkbox',
  templateUrl: 'intents-checkbox.component.html',
  styleUrls: ['intents-checkbox.component.scss']
})
export class IntentsCheckboxComponent implements OnChanges {

  @Input() intentId;

  constructor() { }

  public isSelected = false;


  intentChecked(event, intentId): void {
    this.isSelected = event.checked;
  }
}

html:

<md-checkbox [checked]="isSelected"
             (change)="intentChecked($event, intentId)"
             class="project-checkbox">
</md-checkbox>

到目前为止我的测试:

it('should call intentChecked on change checkbox', () => {
    let de = fixture.debugElement.query(By.css('.project-checkbox'));
    de.triggerEventHandler('click', {});
    fixture.detectChanges();
    expect(component.intentChecked).toHaveBeenCalled();
  })

(因此测试的结果是它失败了,因为没有按预期调用intentChecked).

谢谢!

我正在尝试使用角度形式的角度材料2 datepicker,我收到此错误:

vendor.bundle.js:92803 ERROR TypeError: Cannot read property 'invalid' of undefined
    at MdInput.defaultErrorStateMatcher [as errorStateMatcher] (vendor.bundle.js:121344)
    at MdInput.webpackJsonp.../../../material/@angular/material.es5.js.MdInput._updateErrorState (vendor.bundle.js:131778)
    at MdInput.webpackJsonp.../../../material/@angular/material.es5.js.MdInput.ngDoCheck (vendor.bundle.js:131739)
    at checkAndUpdateDirectiveInline (vendor.bundle.js:102634)
    at checkAndUpdateNodeInline (vendor.bundle.js:104132)
    at checkAndUpdateNode (vendor.bundle.js:104071)
    at prodCheckAndUpdateNode (vendor.bundle.js:104765)
    at Object.View_FormComponent_0._co [as updateDirectives] (ng:///AppModule/FormComponent.ngfactory.js:2337)
    at Object.updateDirectives (vendor.bundle.js:104522)
    at checkAndUpdateView (vendor.bundle.js:104038)

以下是我的组件的代码形式:

import {Component, OnInit, Output, Input, EventEmitter} from "@angular/core";
import {FormControl, Validators, FormGroup} from "@angular/forms";
import {ReferentialService} from "../shared/referential.service";

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {

  private form: …

我正在尝试为angular 4项目设置Angular Material。

我遵循了“入门指南”，除几件事外，几乎都有其他所有内容

1. 添加时，工具栏组件不会更改颜色 color="primary"
2. 工具栏的字体系列似乎不正确，实际上，我认为它试图获取的CSS是不正确的。
3. 不需要自定义材质组件的字体家族很奇怪

我在这里使用angular-cli 1.4.9 设置了一个简单的存储库

我昨天开始使用Material模块进行Angular,特别是使用自定义过滤器创建自动完成输入字段:https://material.angular.io/components/autocomplete/overview

我还是Angular的新手,我在他们的网站上为我的项目申请了这个例子,即使只是在一个新项目中复制/粘贴他们的例子,我也得到了同样的错误:

input-form.component.ts(75,9): error TS2684: The 'this' context of type 'void' is not assignable to method's 'this' of type 'Observable string'

和

input-form.component.ts(76,9): error TS2684: The 'this' context of type 'void' is not assignable to method's 'this' of type 'Observable<{}>'

该错误存在于ts文件中,其中包含: "filteredCities = this.cityControl..."在ngOnInit中.(见下文)

但我真的不明白错误是什么意思.对不起,如果这可能是一个noobish问题.我仍然没有在互联网上找到答案.我错过了什么？我对理解这个问题很感兴趣.

这是我的文件: input-form.component.html

<form [formGroup]="reportDataForm" (ngSubmit)="onSubmit()">
  <h3>Informations de l'en-tête</h3>
    <div class="form-group row">
      <label for="InputCity" class="col-3 col-form-label">Commune</label>
        <div class="search col-9">
          <mat-form-field>
            <input
            type="text"
            class="form-control"
            id="InputCity"
            matInput [formControl]="cityControl"
            [matAutocomplete]="auto"
            (click)="displayCities()">
          </mat-form-field>

          <mat-autocomplete #auto="matAutocomplete"> …

我正在尝试实现角度材料6中自动完成功能的无限滚动。我的场景很简单，我有一个启用了自动完成功能的输入文件。当用户键入内容时，我将使用输入字段中的文本进行HTTP调用，以将结果显示为建议。但我想只显示25个建议，如果算上结果超过25时，用户滚动到我想要的底部多加一个25像这样在角2

我无法在网上找到。

请指教或帮助我。先感谢您。

<mat-form-field>
  <input matInput placeholder="Experiment Name" formControlName="experimentName" [matAutocomplete]="expNamesAutocomplete">
</mat-form-field>
<mat-autocomplete #expNamesAutocomplete="matAutocomplete">
  <mat-option *ngFor="let option of suggestedExpNames" [value]="option">
              {{ option }}
  </mat-option>
</mat-autocomplete>

我想并排显示一个输入字段和一个芯片项目.但是,芯片将进入下一行.有什么方法可以将它们并排放在同一排吗？

当前位置:

预期职位:

我有一个简单mat-table的mat-paginator。

默认设计如下：

我想更改范围标签的放置并将其放在导航按钮之间，如下所示：

基本上，我需要将div.mat-paginator-range-label元素从此容器的顶部移至button.mat-paginator-navigation-previous和之间button.mat-paginator-navigation-next。

有什么想法吗？谢谢。