小编G. *_*ter的帖子

我在Angular 5应用程序中使用此角度材质选择:

<mat-form-field style="width:88%;">
    <mat-select placeholder="Contact *" formControlName="contact">
       <mat-option *ngFor="let contact of contacts" [value]="contact">
         <mat-icon [ngStyle]="{'color': contact.color}">home</mat-icon>{{contact.institution}} 
       </mat-option>
    </mat-select>
</mat-form-field>

在选择面板上,<mat-icon>s被列为预期,但如果我选择一个选项而不是主页,则在<mat-form-field> 我的问题中列出现在将如何查看主页图标<mat-form-field>

所以看起来我可以通过以下方式更改空的背景颜色md-checkbox:

md-checkbox .md-icon {
background: red;
}

但我无法改变已检查的背景md-checkbox.我试着玩:checked,::before,::after...但没有成功.

我该怎么办？

我有一个LoginView组件，其中有角度材质选项卡。在一个选项卡中显示一个LoginForm组件，在第二个选项卡中显示一个RegistrationForm组件。

我尝试测试的LoginView是，当我单击第二个选项卡时，RegistrationForm将显示 a 。但是，我不知道如何单击选项卡。我尝试添加nameorid到 mat-tab 但它没有在 DOM 中生成，querySelectorAll()也返回null.

来源：

<mat-tab-group dynamicHeight class="py-5">
  <mat-tab label="{{'form.letsLogIn' | translate}}">
    <app-login-form></app-login-form>
  </mat-tab>
  <mat-tab label="{{'form.letsRegister' | translate}}">
      <app-registration-form></app-registration-form>
  </mat-tab>
</mat-tab-group>

规格文件：

import { Component } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { LoginViewComponent } from './login-view.component';
import { TranslateModule } from '@ngx-translate/core';
import { MatTabsModule } from '@angular/material';
import { BrowserAnimationsModule } …

我通过以下方式升级到Angular 7.1.0：

"@angular/animations": "^7.1.0",
"@angular/cdk": "^7.1.0",
"@angular/common": "^7.1.0",
"@angular/compiler": "^7.1.0",
"@angular/core": "^7.1.0",
"@angular/forms": "^7.1.0",
"@angular/http": "^7.1.0",
"@angular/material": "^7.1.0",
"@angular/platform-browser": "^7.1.0",
"@angular/platform-browser-dynamic": "^7.1.0",
"@angular/router": "^7.1.0"

我正在使用Angular Material Expansion Panels，它们最初通过[expanded] =“ false”扩展为false。

扩展面板的主体在几毫秒内可见。从扩展到未扩展似乎只是一小段路程。有人有同样的问题吗？

<mat-expansion-panel-header>

  <mat-panel-title>
    <div class="NumberAccordionContentWrapper__centered">
      <h2 [class.NumberAccordion__notExpanded]="!isExpanded">{{ headline }}</h2>
    </div>
  </mat-panel-title>

</mat-expansion-panel-header>

<div class="NumberAccordionContentWrapper__centered">

  <ng-template tbHost></ng-template>

</div>

我试图在菜单中使用复选框选项,但我需要保持菜单打开,直到用户选择完选项.我正在使用最新版本的Angular.先感谢您!

我已经联合嵌套垫菜单,这里有复选框:

我尝试了什么,但选中一个复选框后菜单关闭:

<mat-menu #worldtest="matMenu" md-prevent-menu-close="md-prevent-menu-close">
     <section><mat-checkbox class="example-margin" [(ngModel)]="checked">Checked</mat-checkbox></section>
     <section><mat-checkbox class="example-margin" [(ngModel)]="indeterminate">Indeterminate</mat-checkbox></section>
</mat-menu>

因此，就上下文而言，我刚刚安装了模板。并想搞乱它。我正在使用文档“npm install -g @stencil/core@latest --save-exact”中的最新版本，当我第一次使用 运行它时npm start，它抛出了一堆错误并抱怨缺少库。所以我运行npm install它修复了所有这些错误，但现在当我尝试运行它时它会抛出一个新错误。请记住，我没有在项目中编辑或添加任何我自己的代码。错误如下。忽略边框，这是我的截图工具）

[错误] TypeScript：./node_modules/@types/babel__traverse/index.d.ts:321:6 索引签名参数类型必须是“字符串”或“数字”。

L320:      // this is good enough for non-visitor traverse options e.g. `noScope`
L321:      [k: `${string}|${string}`]: VisitNode<S, Node>;
L322:  };

[01:19.3] 构建失败，正在观察变化...在 2.96 秒内`

我希望能够有选择地向输入添加自动完成功能。

目前，我已经尝试*ngIf在垫子自动完成标记中添加一个，但由于输入具有该matAutocomplete属性并且正在寻找自动完成组件，因此会引发错误。我matAutocomplete还想将自动完成功能设置为null，但这不起作用。

这是我的累：

• https://stackblitz.com/edit/angular-3ebz9m-bw56h9?file=app/autocomplete-overview-example.html

但是我得到：

Error: Attempting to open an undefined instance of `mat-autocomplete`.

这就是我想要的工作方式：

• https://stackblitz.com/edit/angular-3ebz9m-umwj6h?file=app%2Fautocomplete-overview-example.html

但是不必重复输入和表单字段标签。

我正在为我的应用程序使用 Angular-Material Autocomplete（版本 7）。我用的是<cdk-virtual-scroll-viewport>里面的 除了我已经解决的许多问题之外，还有一个我不明白的问题：

当我添加 max-height css 时，下拉菜单不会显示，如果我添加高度，它将以固定高度显示。

这是我的代码的一部分：html：

<mat-form-field class="single-select">
  <input matInput #singleInput class="single-input layout flex" type="text" [formControl]="selectControl" [matAutocomplete]="auto" (blur)="onBlur()" (focus)="onFocus()">

  <mat-autocomplete class="single-autocomplete" #auto="matAutocomplete" [displayWith]="displayFn">
    <cdk-virtual-scroll-viewport itemSize="45" minBufferPx="360" maxBufferPx="360" class="virtual-scroll">
      <mat-option *cdkVirtualFor="let option of filteredOptions" [class.selected]="option === oldValue" [value]="option" (click)="onSelect(option)">{{option.label}}</mat-option>
    </cdk-virtual-scroll-viewport>
  </mat-autocomplete>
</mat-form-field>

TS：

export class SingleSelectComponent implements OnInit {
  @Input() value;
  @Input('options')
  set options(value) {
    if (value) {
      this.filteredOptions = value.slice();
      this.data = value;
      this.initValue();
    }
  }
  @Output() formValue = new EventEmitter<any>();

  @ViewChild('singleInput') singleInput;

  selectControl …