标签: angular-material

该对话框显示在我的页面底部，具有奇怪的外观和行为！Angular Material 以下是正在使用的版本：

@角度/材料"："^2.0.0-beta.8，@角度/核心"："^4.2.6"

我正在使用 bootstrap v3.7.x （我试图使用 ng-bootstrap modal，结果发现它不再适用于 bootstrap 3）

我的组件.html

 <button md-button type="button" class="btn btn-primary" (click)="openMyModal()">OPEN</button>

我的组件.ts：

import {MdDialog} from '@angular/material';
import {MyModal} from "./myModal.component"
@Component({
  templateUrl: "./my.component.html"
})
    export class My {
      constructor(public dialog: MdDialog) {}

    openMyModal():void {
        const modalInstance = this.dialog.open(MyModal);
      }
    }

myModal.component.ts：

import { Component } from '@angular/core';
import {MdDialog, MdDialogRef} from '@angular/material';

        @Component({
          template: `<div class="modal-body">
                          Modal content Here
                          </div>`
        })
        export class MyModal {
          constructor(

    public dialogRef: MdDialogRef<MyModal>) {}
    } …

我使用 Angular4 与 Redux 和 Angular Material 来设计我的网页。我正在尝试将 md-select 面板设置为打开。示例场景：单击按钮调度一个操作来打开选择面板以显示所有选项。

我正在使用 redux 操作来操纵我的组件状态。所以基本上我需要触发一个操作来将选择设置为打开。

有什么建议么？

所以我在为 Angular 4 应用程序进行单元测试时遇到了这个问题

发生的情况是它不断给出问题标题中所述的错误。

我尝试用谷歌搜索它，尝试导入一大堆不同的模块，最后发现这个“平台”的接近答案可能是@angular/browser平台中的 browserModule 。

因此，在我的单元测试中，我尝试导入它并声明它，但没有帮助。

任何人都可以帮忙解决这个问题，因为我什至不确定这个“平台”是什么？

问题：错误中的这个“平台”到底是什么以及如何修复它？

谢谢。

我已附上我的代码如下：

import { ComponentFixture, TestBed, async} from "@angular/core/testing";
import { DebugElement, CUSTOM_ELEMENTS_SCHEMA, PlatformRef} from 
"@angular/core";
import { TeamCreationAssignmentComponent } from "./team-creation-assignment.component";
import { OdmService } from "../../services/odm/odm.service";
import { UserNotificationService } from "../../services/user/user-notification.service";
import { MatSnackBar } from "@angular/material";
import { OVERLAY_PROVIDERS, ScrollStrategyOptions, ScrollDispatcher} from "@angular/cdk/overlay";

describe('Team creation assignment component', () => {
let comp: TeamCreationAssignmentComponent;
let fixture: ComponentFixture<TeamCreationAssignmentComponent>;

let odmServiceSub = {};


beforeEach(async(() => { …

https://material.angular.io/guide/getting-started

ng new testapp
cd testapp
npm install --save @angular/material @angular/cdk
npm install --save @angular/animations
ng serve

应用程序模块.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatFormFieldModule, MatInputModule } from '@angular/material';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatFormFieldModule,
    MatInputModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

应用程序组件.html

<p>Test Angular Material</p>

<form>
  <mat-form-field class="example-full-width">
    <input matInput …

我正在为我的项目使用自动完成材料，但我不明白如何使用 [displayWith]。我尝试了一些示例，但不在 html 中显示名称，仅显示 id。

我的html代码：

<form [formGroup]="editClientForm">
  <input formControlName="city_id" id="city_id" matInput placeholder="Select City*" aria-label="State" [matAutocomplete]="auto1"
    autoActiveFirstOption [formControl]="city">
  <mat-autocomplete #auto1="matAutocomplete" [displayWith]="displayFnCity">
    <mat-option (onSelectionChange)="updateForm($event, city.city_id, 'city_id')" *ngFor="let city of filteredOptionsCity | async"
      [value]="city.name">
      {{ city.name }}
    </mat-option>
  </mat-autocomplete>
</form>

我的 ts 组件：

  cityid = 0;
  filteredOptionsCity: any;
  city: FormControl = new FormControl();
  editClientForm: FormGroup;
    this.editClientForm = this.fb.group({
      'city_id': new FormControl('', Validators.required),
         });
  ngOnInit() {
    this.filteredOptionsCity = this.city.valueChanges.pipe(
      startWith(''),
      map(value => this.filterCity(value))
    );
}

  populateForm() {
    this.activatedRoute.params.subscribe(
      params => {
        this.clientService.getClientById(params['id']).subscribe(
          client …

默认图标MatCheckbox Indeterminate如下：

我想将其自定义为如下所示：

我想知道如何在 angular 中默认选择 mat-list 的第一项。我尝试过但无法解决它。我的 mat-list 代码在这里

export class StationsListComponent implements OnInit {

  @Input() stations: Stations[];
  selectedStation: Stations;

  constructor() { }

  ngOnInit(): void {
    this.selectedStation = this.stations[0];
  }
}

<mat-list role="list">
  <div *ngFor="let book of Books">
    <mat-list-item id="{{book.bookId}}" role="listitem" class="list-item" routerLink="/home/{{book.bookId}}" [routerLinkActive]="['is-active']">
      <div class="station-div">
          <div class="station-name">{{book.bookName}}</div>
          <div class="station-location">{{book.authorName}}</div>
      </div>
    </mat-list-item>
  </div>
</mat-list>

我想在标签上显示工具提示。不幸的是，这不起作用。有简单的解决方案吗？

  <mat-form-field >
    <mat-label matTooltip="Please enter your E-Mail Address">
      E-Mail <mat-icon>help_outline</mat-icon>
    </mat-label>
    <input
      matInput
      placeholder="Enter your email"
      [formControl]="email"
     >
    <mat-error *ngIf="email.invalid">{{getErrorMessage()}}</mat-error>
  </mat-form-field>

请参阅此堆栈闪电战示例

这是我的 HTML

<mat-grid-list cols="3" rowHeight="150px">
 <mat-grid-tile
    *ngFor="let tile of tiles;index as j;"
     [colspan]="tile.cols"
     [rowspan]="tile.rows"
     >
   <div (onclick)="openbox();" style="z-index: 2">
                                       
          {{tile.text}}<br>
          <img src="https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1027&q=80" height="200px" width="260px">
   </div>
    </mat-grid-tile>
</mat-grid-list>

Ts

export class RegistrationComponent implements OnInit {
...
 openbox(){
    console.log('clicked')
  }
...
}

我尝试过的事情：

style="z-index: 2; position: relative;"
隐身

浏览器 Chrome Angular-9
我的目标是获取点击的 mat-grid-tile 的索引有没有其他方法可以做到这一点？
谢谢

我正在编写一个程序，该程序调用使用文本框在表格上显示数据的方法。问题是它每次调用程序超过 10 次。有没有办法避免这种情况？

这是文本框：

<input #input matInput placeholder="Search data" (keyup)="onKeypressEvent($event)">

这是我正在调用的方法：

  onKeypressEvent(event: any){
    fromEvent(this.input.nativeElement,'keyup')
        .pipe(
            debounceTime(150),
            distinctUntilChanged(),
            tap(() => {
                this.paginator.pageIndex = 0;
                this.loadData();
            })
        )
        .subscribe();
  }