标签: angular-material2

我目前正在尝试在角材料 2 中创建传单贴图 tab-group，如下所示

import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { MaterialModule } from '@angular/material';

import { Component, OnInit, OnDestroy } from '@angular/core';
import 'leaflet';

@Component({
  selector: 'minimap',
  template: `<div #minimap [id]="id" class=leaflet-map></div>`
})
export class MiniMap implements OnInit, OnDestroy {
  map: L.Map = null;
  id: string;

  constructor() { 
    this.id = "map" + Date.now();
  }

  ngOnInit() {
    this.map = L.map(this.id).setView([54.5, -115.0], 13);
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
      maxZoom: 18,
      attribution:
      '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(this.map);
  }

  ngOnDestroy() { …

我想获得下一个按钮点击事件，我知道如何做到这一点

<md-paginator [length]="length"
    [pageSize]="pageSize"
    [pageSizeOptions]="pageSizeOptions"
    (page)="pageEvent = $event"
    (selectChange)="onPaginateChange($event)">   <---------  not working
</md-paginator>

这个问题与 Angular 2+ 和 @angular/flex-layout 包有关。

fxFlex="30"例如，在尝试使用时，CSS 样式并未应用于元素。

<mat-toolbar fxFlex="30" color="primary">
    <h2>Uh-oh</h2>
</mat-toolbar>

请查看以下应用程序：

https://stackblitz.com/edit/angular-1qxhep

我正在尝试从另一个对话框中打开一个对话框。共享示例在 Chrome 中运行良好，但在 Safari 中不起作用。

如果您检查 safari 中的两个 console.log() 语句，结果看起来会有所不同：

苹果浏览器

第一个对话框信息：

MatDialogRef {_overlayRef: OverlayRef, _containerInstance: MatDialogContainer, id: "dialog1", disableClose: false, _afterOpen: Subject, …}

第二个对话框信息：

MatDialogRef {_overlayRef: OverlayRef, _containerInstance: MatDialogContainer, id: "dialog1", disableClose: false, _afterOpen: Subject, …}

铬合金

第一个对话框信息：

MatDialogRef {_overlayRef: OverlayRef, _containerInstance: MatDialogContainer, id: "dialog1", disableClose: false, _afterOpen: Subject, …}

第二个对话框信息：

MatDialogRef {_overlayRef: OverlayRef, _containerInstance: MatDialogContainer, id: "dialog2", disableClose: false, _afterOpen: Subject, …}

请注意，对于 Chrome，传递给对话框的“id”参数被正确选取，对于 Safari，我没有得到相同的行为，因此 Safari 不会打开第二个对话框面板。

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

/**
 * @title Dialog Overview
 */
@Component({
  selector: 'dialog-overview-example',
  templateUrl: 'dialog-overview-example.html'
})
export class DialogOverviewExample {

  animal: string;
  name: string;

  constructor(public dialog: MdDialog) {}

  openDialog(): void {
    let dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      width: '250px',
      data: { name: this.name, animal: this.animal }
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
      this.animal = result;
    });
  }

}

@Component({
  selector: 'dialog-overview-example-dialog',
  templateUrl: 'dialog-overview-example-dialog.html',
})
export class DialogOverviewExampleDialog {

  constructor(
    public dialogRef: MdDialogRef<DialogOverviewExampleDialog>, …

我对4号角和4号角材料非常陌生，我仍处于学习阶段。我正在尝试创建一个用户登录并导航至仪表板的应用程序。现在，我在仪表板中显示标题组件并将其隐藏在登录页面中。但是，当我刷新仪表板上的浏览器时，标题组件不会加载。我使用本教程来创建PoC

现在我不知道解决方案。任何帮助将不胜感激。提前致谢...！！！

请在下面找到我的代码

app.module.ts

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { HttpClientModule, HttpClient } from '@angular/common/http';
    import { HttpModule } from '@angular/http';
    import { RouterModule, Routes } from '@angular/router';
    import 'hammerjs';
    import { NgxPhoneSelectModule } from 'ngx-phone-select';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    import { FormsModule, ReactiveFormsModule } from '@angular/forms';
    import { MatInputModule, MatButtonModule, MatSelectModule } from '@angular/material';
    import { MatGridListModule } from '@angular/material';
    import { MatTableModule } from '@angular/material';
    import { …

我有这个简单的html：

 <mat-card>
    <mat-card-content>
      <code>{{file}}</code>
    </mat-card-content>
 </mat-card>

由于某种原因，当呈现mat-card元素时，它没有被提出-我正在寻找这样的东西：

有谁知道我是否可能会缺少一些其他CSS？我不明白

我已将标题单元格和单元格的样式设置为右对齐，但标题仅与单元格文本对齐

这是一个示例的链接

我已经添加了

.mat-cell, .mat-header-cell {
    text-align: right;
}

我试图使用角度材料选择表在角度2中实现一个简单的表格.

我用一个按钮从表中删除选定的行.但是点击按钮我怎么能删除行？

下面显示的是我的表格的html文件

<div class="example-container mat-elevation-z8">
  <mat-table #table [dataSource]="dataSource">

    <!-- Checkbox Column -->
    <ng-container matColumnDef="select">
      <mat-header-cell  style="max-width: 100px;" *matHeaderCellDef>
        <mat-checkbox (change)="$event ? masterToggle() : null"
                      [checked]="selection.hasValue() && isAllSelected()"
                      [indeterminate]="selection.hasValue() && !isAllSelected()">
        </mat-checkbox>
      </mat-header-cell>
      <mat-cell   style="max-width: 100px;" *matCellDef="let row">
        <mat-checkbox (click)="$event.stopPropagation()"
                      (change)="$event ? selection.toggle(row) : null"
                      [checked]="selection.isSelected(row)">
        </mat-checkbox>
      </mat-cell>
    </ng-container>

    <!-- Number Column -->
    <ng-container matColumnDef="num">
      <mat-header-cell style="max-width: 100px;" *matHeaderCellDef> No. </mat-header-cell>
      <mat-cell style="max-width: 100px;" *matCellDef="let element"> {{element.num}} </mat-cell>
    </ng-container>

    <!-- Message Column -->
    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef> Message </mat-header-cell>
      <mat-cell …

我正在使用angular5和angular material2.我想删除所需字段的星号或星号.我还想在占位符之前添加自定义星号或星号.

<mat-form-field>
      <input matInput placeholder="Applicant Name" name="inputApplicantName" 
      [(ngModel)]="inputApplicantName" required>
 </mat-form-field>