标签: 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 { …

已解决问题：只需添加dynamicHeight到<mat-tab-group>

我目前有一张卡片(mat-card)，里面有 2 个标签（现在你只能看到一个标签，但想法是解决这个问题以添加另一个；这将具有相同的内容，但将作为一个例子，因为它只是 Lorem Ipsum暂时文本），我不知道如何做的是删除滚动条并且内容只是不断向下拉伸卡片。

我正在使用 Angular 5，当然还有 Angular Material 5。

我尝试了通过 Google 和 StackOverflow 找到的几件事，但没有一个对我有用。我在网格系统中使用 Flexbox。

我的 lorem.component.html 代码：

<div class="content-padder content-background">
  <div class="uk-section-small uk-section-default header">
    <div class="uk-container uk-container-large uk-animation-slide-top-medium">
      <h1><span uk-icon="credit-card"></span> Lorem</h1>

      <p>Lorem</p>
      <ul class="uk-breadcrumb">
        <li><a href="#">Lorem</a></li>
        <li><span href="">Lorem</span></li>
        <li><span href="">Lorem</span></li>
      </ul>
    </div>
  </div>
  <div class="uk-section-small content-padder content-background">
    <div class="container">
      <mat-card>
          <div class="mat-tab-fix">
            <mat-tab-group>
                <mat-tab class="tabs" label="Tab 1">

                        <h2 style="padding-top: 30px;">
                            <span>Lorem</span>
                          </h2>

          <div class="card-layout">
            <div class="card-column-1"> …

我可以mat-checkbox禁用我的功能，但希望保持与启用时相同的 css。当输入文本有值时，复选框将被选中，就像我在下面所做的那样：

<mat-checkbox [disableRipple]="true" [checked]="option.controls.text.value !== ''">
  <input #infoBox matInput formControlName="info" class="input-other" maxlength="100" type="text" [value]="option.controls.text.value">
</mat-checkbox>

我正在尝试将表格中的标题之一对齐。我试过：

.header-align-right {
    display: flex;
    justify-content: flex-end;
  }

在一个类中并将其添加到mat-header-cell. 这使文本右对齐，但也为元素添加了奇怪的间距，使其与其余标题不对齐。在没有的情况下也尝试过，display:flex但是什么也没做。

<ng-container matColumnDef="Number">
        <th mat-header-cell *matHeaderCellDef mat-sort-header class="header-align-right">Number</th>
        <td mat-cell *matCellDef="let row" align="right">{{row.Number}}</td>
        <td mat-footer-cell *matFooterCellDef></td>
</ng-conIainer>

如您所见，我将单元格的内容对齐，并且我也想对齐标题。

我的“真棒”菜单：

<mat-menu #appMenu="matMenu">
  <ng-template matMenuContent let-myobject="myobject">
    <button mat-menu-item>Delete {{myobject.name}}</button>
    <button mat-menu-item>Smth else</button>
  </ng-template>
</mat-menu>

<button mat-icon-button [matMenuTriggerFor]="appMenu" [matMenuTriggerData]="{myobject: myobject}">
   <mat-icon>more_vert</mat-icon>
</button>

第一个问题是可以吗？写了这以下的文档，但let-myobject="myobject"与{myobject: myobject}貌似开销（？）

第二个问题是，如果我想根据myobject- 我怎么做来计算一些数据？我希望它在菜单打开之前计算。

[matMenuTriggerData]="getData(myobject)" - 不能做这个或类似的工作

<ng-template matMenuContent let-data="getData(myobject)"> - 也不能做这个或类似的工作

我知道我可以在这里用组件替换 ng-template，但是对于例如 10 个菜单项，我需要在这个组件中做 10 个输出。（？或者我不能...）

参数 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: …