标签: angular-material

我正在开发一个显示数据表中实体概述的应用程序。每个实体都有链接的实体，在列中显示为“xxx 个链接的实体”。当用户单击该列的值时，将打开一个显示链接实体列表的材料对话框。这些都是与其他实体的链接。单击这些链接之一后，将显示实体的正确页面，但该对话框不会关闭。使用后退按钮时我确实关闭了。我正在使用该closeOnNavigation物业。

一些示例代码：

在我的主要组件中：

public openDialog(entity: Entity) {
    const dialogRef = this.dialog.open(EntityDialogComponent, {
        closeOnNavigation: true,
        data: {
            entity,
            otherEntities: this.getNameOfOtherEntities(),
        },
    });
}

对话框的HTML：

<h1 mat-dialog-title>Linked {{otherEntities}}:</h1>
<mat-dialog-content>
<mat-list role="list">
    <mat-list-item role="listitem" *ngFor="let linkedEntity of entity.getProperty('linkedEntities')">
       <a class="m-link m--font-bold" [routerLink]="['/reporting/' + otherEntities, linkedEntity.id]">{{linkedEntity.name}}</a>
    </mat-list-item>
</mat-list>
</mat-dialog-content>
<mat-dialog-actions>
    <button mat-button (click)="cancel()">Close</button>
</mat-dialog-actions>

对话框组件：

@Component({
    selector: "entity-dialog",
    templateUrl: "entity-dialog.component.html",
})
export class EntityDialogComponent {

    public entity: Entity;
    public otherEntities: string;

    constructor(
        public dialogRef: MatDialogRef<EntityDialogComponent>,
        @Inject(MAT_DIALOG_DATA) public data: IDialogData,
    ) { …

谁能提供有关如何居中（或向右移动）Angular Material 表格标题和单元格文本的简明解释？似乎有很多需要 /deep/ 和其他版本，这些版本可能会或可能不会被弃用。

在这里，我需要将 tab.staffMemberId 发送到服务并获取值并填充 matInput 值。当标签更改时，我需要将Tab.staffmemberId发送到服务

<mat-tab-group>
<mat-tab *ngFor="let tab of StaffMemberList; let index = index" [label]="tab.staffMemberId">
{{tab.id}}
<mat-grid-list cols="3" rowHeight="8:1">
    <mat-grid-tile>
      <mat-form-field class="full-width">
        <input matInput placeholder="Position" >
      </mat-form-field>
    </mat-grid-tile>
</mat-grid-list>

任何想法为什么没有正确应用角度材料样式？

我知道对此有很多问题，但我似乎无法找到解决我问题的方法。我已经在几个项目中毫无问题地使用了角度材料，但似乎无法弄清楚这里发生了什么。
我可能忽略了一些简单的东西，但就是看不到它。我刚刚升级到 angular 7，所以它可能与此有关。

这是我的对话框，它只显示在带有奇怪或没有样式的父页面中。它正在做一些事情，因为与取消按钮相比，您可以看到按钮略有变化。

<div>
  <h4 mat-dialog-title>New Course Item</h4>
</div>
<div mat-dialog-content>
    <div>
        <div>
          <mat-form-field>
              <mat-label>Title</mat-label>
              <input type="text" [(ngModel)]="newCourseItem.title" #title="ngModel" matInput required placeholder="Title" name="title"/>
              <mat-error *ngIf="title.hasError('required')">This field is required</mat-error>
          </mat-form-field>
        </div>
        <div>
          <button (click)="this.dialogRef.close()">Cancel</button>
          <button mat-raised-button color="primary" [mat-dialog-close]="newCourseItem" cdkFocusInitial>Add New</button>
        </div>
      </div>
</div>

import { CourseItem } from './../../../../models/course-item';
import { Component, OnInit, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';

@Component({
  selector: 'app-new-course-item-dialog',
  templateUrl: './new-course-item-dialog.component.html',
  styleUrls: ['./new-course-item-dialog.component.css']
})
export class NewCourseItemDialogComponent implements OnInit { …

参数 1：时间段 {{element.value}} 参数 2：性别 {{element.gender}}

<ng-container matColumnDef="column3">
  <mat-header-cell *matHeaderCellDef rowspan="2"> Patients with Base Condition </mat-header-cell>
  <mat-cell *matCellDef="let element"> {{element.value}} </mat-cell>
</ng-container>

<ng-container matColumnDef="column4">
  <mat-header-cell *matHeaderCellDef> Patients with Outcome</mat-header-cell>
  <mat-cell *matCellDef="let element"> {{element.value}} </mat-cell>
</ng-container>

<ng-container matColumnDef="column5">
  <mat-header-cell *matHeaderCellDef class="ColumnDivider"> Prevelance </mat-header-cell>
  <mat-cell *matCellDef="let element" class="ColumnDivider"> {{element.value}} </mat-cell>
</ng-container>

<ng-container matColumnDef="column6">
  <mat-header-cell *matHeaderCellDef> Patients at Risk </mat-header-cell>
  <mat-cell *matCellDef="let element"> {{element.value}} </mat-cell>
</ng-container>

<ng-container matColumnDef="column7">
  <mat-header-cell *matHeaderCellDef> New Patients with Outcome </mat-header-cell>
  <mat-cell *matCellDef="let element"> {{element.value}} </mat-cell>
</ng-container>

<ng-container matColumnDef="column8"> …

如果我们在手机浏览器中看到如下标签，有两个按钮【分页控件】（第一个在右侧，另一个在左侧）

<mat-tab-group mat-stretch-tabs class="example-stretched-tabs mat-elevation-z4">
    <mat-tab label="Item-1"> Content 1 </mat-tab>
    <mat-tab label="Item-2"> Content 2 </mat-tab>
    <mat-tab label="Item-3"> Content 3 </mat-tab>
    <mat-tab label="Item-4"> Content 4 </mat-tab>
    <mat-tab label="Item-5"> Content 5 </mat-tab>
    <mat-tab label="Item-6"> Content 6 </mat-tab>
    <mat-tab label="Item-7"> Content 7 </mat-tab>
    <mat-tab label="Item-8"> Content 8 </mat-tab>
    <mat-tab label="Item-9"> Content 9 </mat-tab>
    <mat-tab label="Item-10"> Content 10 </mat-tab>
</mat-tab-group>

我将删除这两个按钮并使用滚动代替。

解决方法：

（步骤 1）使用以下代码删除两个按钮：

ngAfterViewInit(): void {
  document.getElementsByClassName('mat-tab-header-pagination-before')[0].remove();
  document.getElementsByClassName('mat-tab-header-pagination-after')[0].remove();
}

（第 2 步）将以下样式放入 style.css 中：

.mat-tab-label-container {
    display: flex;
    flex-grow: …

我将 Angular 与 Material Design 组件一起使用。如何使用 CSS 在 textarea 输入字段周围添加边框？

来自https://material.angular.io/components/input/examples 的示例文本区域：

<form class="example-form">
  <mat-form-field class="example-full-width">
    <textarea matInput placeholder="Leave a comment"></textarea>
  </mat-form-field>
</form>

默认的 textarea 是什么样的

我正在尝试实现一个移动风格的底部导航栏。为此，我使用了 mat-toolbar 并使用 css 将其固定在底部，如下所示：

组件.html：

<mat-toolbar class="toolbarNav">
    <mat-icon class="material-icons color_blue" (click)="getTopArtists('long_term' , 0 , 100)">
        star_border</mat-icon>
    <mat-icon class="material-icons color_blue" (click)="getTopTracks('long_term' , 0 , 100)">favorite_border
    </mat-icon>
    <mat-icon class="material-icons color_blue" (click)="recentlyPlayed()">history</mat-icon>
</mat-toolbar>

组件.css

.toolbarNav{  
    position: fixed;
    bottom: 0; 
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    padding: 2em;
    background-color: white;

  -webkit-box-shadow: 3px 3px 5px 6px #ccc;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow:    3px 3px 5px 6px #ccc;  /* Firefox 3.5 - 3.6 */
   box-shadow:        2px 2px 4px 5px …

具体来说，如何在相应的信息窗口中显示与标记相关的信息？

通过遵循此处存储库上的示例，将为每个标记打开相同的信息。使用旧的角度谷歌地图，您可以轻松地将信息窗口插入标记内，并包含您想要的任何数据。

我看到了一些在模板中使用 {{ contentHere }} 设置内容的示例，但这只允许使用字符串。我需要像往常一样使用所有角度模板。

假设我们的模板类似于存储库示例：

<google-map height="400px"
        width="750px"
        [center]="center"
        [zoom]="zoom">
  <map-marker #marker
          *ngFor="let place of places"
          [position]="{ lat: place.latitude, lng: place.longitude }"
          [options]="markerOptions"
          (mapClick)="openInfoWindow(marker)">

      <map-info-window>
        <-- this is what i'm concerned with -->
        {{ place.description }}
      </map-info-window>
  </map-marker>
</google-map>

然后我们像 repo 示例一样添加 viewchild 并以相同的方式打开它：

@ViewChild(MapInfoWindow, {static: false}) infoWindow: MapInfoWindow;

openInfoWindow(marker: MapMarker) {
  this.infoWindow.open(marker);
}

虽然这确实打开了正确的标记，并且标记将反映动态信息，但这将为每个信息窗口显示相同的内容/地点.描述，这并不奇怪，因为正在使用单个 ViewChild。我想出了各种复杂的方法来做到这一点，并查看了源代码，但似乎没有一个明显的和/或内置的解决方案来在窗口中显示与内容相关的内容被标记者使用。没有将其作为基本示例似乎很奇怪。

你们中的任何人会如何去做这件事？

我正在一个使用 Material 的 Angular 项目中工作。

我有一些带有轮廓外观输入的垫子表单字段。我想更改轮廓的边框半径（增加它）。

我阅读了此 stackoverflow：How to remove theoutline mat-form-filed bordercorner radius。

但这些解决方案都不允许我正确地增加边界。它很接近，但它会在输入的左侧引起奇怪的事情：

我不想使用封装。我用起来没问题::ng-deep。

这是一个 stackblitz 演示：https://stackblitz.com/edit/angular-9-material-starter-pp4349 ?file=src%2Fapp%2Fapp.component.css