标签: angular-material

我试图覆盖步进材质角度的默认编辑图标，但这不起作用。

我尝试：

<mat-horizontal-stepper [linear]="isLinear" #stepper>
   <mat-step>
      <form>
           <ng-template matStepperIcon="edit">
                <mat-icon>home</mat-icon>
           </ng-template>

    ...

</mat-horizontal-stepper>

这样，我的结果是：

当步进器处于活动状态/非活动状态时：

https://i.stack.imgur.com/upB0e.png
https://i.stack.imgur.com/tU143.png

我必须做些特别的事情吗？

Stackblitz：单击材料页面。主页图标不在蓝色圆圈内。

https://stackblitz.com/edit/angular-material-design-wxawqh

  uploadFiles(): void {
    const dialogRef = this.dialog.open(AddNewFilesOrImagesComponent, {
      width: '620px',
      height : '100%',
    });
  }

如果高度为100％的用户界面看起来像这样（在“上传”按钮下，则不必留空白）

如果我将固定高度放到px中（它会使UI滚动）

  uploadFiles(): void {
    const dialogRef = this.dialog.open(AddNewFilesOrImagesComponent, {
      width: '620px',
      height : '250px',
    });
  }

如果我选择文件，我想要实际的这种类型，它会自动增加其高度（当我选择图像时，我想增加matdialogbox的自动高度）

我有个突如其来的指导。

我想显示一个物料卡列表，单击“编辑”按钮，可以在其中编辑文本字段，当我单击“保存”图标时，当然会通过触发功能等进行保存。

但是，我正在努力掌握这一切在Angular中的工作方式以及我的应用程序的Material本质。

html

<form id="myForm" [formGroup]="thisIsMyForm">
  <mat-card [formGroup]="x" *ngFor="let x of data; let i = index">
    <mat-form-field>
      <label for="{{x.name}}">Name</label>
      <input formControlName="name" id="{{x.name}}" matInput value="{{x.name}}">
    </mat-form-field>
    <mat-form-field>
      <label for="{{x.type}}">Type</label>
      <input formControlName="type" id="{{x.type}}" matInput value="{{x.type}}"/>
    </mat-form-field>
  </mat-card>
</form>

ts

import { Component, ViewChild } from '@angular/core';
import {MatSnackBar} from '@angular/material';
import {FormArray, FormBuilder, FormGroup, Validators} from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  thisIsMyForm: FormGroup

  data = [
    {name:"one", type:"one"},
    {name:"two", …

我想将路由器链接添加到席卡组件以使卡可点击。我的组件是这样的：

<mat-card class="card" >
     <mat-card-content>
          <mat-card-title> {{title}}</mat-card-title>
          <mat-card-subtitle> {{subtitle}} </mat-card-subtitle>
     </mat-card-content>
</mat-card>

如何做到这一点？

谢谢。

我在垫子桌子上有三列。

第一列是数字，第三列是日期，第二列是一个大字符串。

我希望第一列为15px，第三列为100px，中间列为其余宽度。百分比为5％，85％为10％。

如何在垫子桌子上做到这一点？

StackBlitz（实时演示）

<div fxLayout="row wrap" fxLayout.xs="column" fxLayoutAlign="space-around center" fxLayoutGap="10px">
  <mat-card *ngFor="let o of cards">
    <mat-card-header>
      <div mat-card-avatar class="example-header-image"></div>
      <mat-card-title>{{o.title}}</mat-card-title>
      <mat-card-subtitle>{{o.subtitle}}</mat-card-subtitle>
    </mat-card-header>
    <img mat-card-image [src]="o.url" alt="Photo of {{o.title}}">
    <mat-card-content>
      <p>
        {{o.content}}
      </p>
    </mat-card-content>
  </mat-card>
</div>

在cards组件上的哪里定义为：

// const url = 'https://material.angular.io/assets/img/examples/shiba2.jpg';
cards: {title: string, subtitle: string, content: string, url: string}[] = [
  { title: 'Title', subtitle: 'Subtitle', content: 'Content here', url },
  { title: 'Title', subtitle: 'Subtitle', content: 'Content here', url },
  { title: 'Title', subtitle: 'Subtitle', content: 'Content …

我有一个用户列表供团队选择。假设我选择了一个用户，那么他在团队中可以是活跃的或不活跃的。现在，如果我根本不选择他，那么我应该既不能激活他，也不能使其失效。这是由复选框和滑块完成的，如下所示：

当我单击复选框时，我需要禁用切换。我尝试通过以下方式执行此操作：

$("#2048").prop('disabled', true);

要么

document.querySelector('[name="' + '#2048' + '"]').disabled = true;

也不起作用（是的，我知道ID不应该是数字，但这是因为每个切换都在* ngFor内。不过，我可以将它们用作数字，因为jQuery仍然可以选择它们）

无论哪种方式，我都坚信做到这一点的唯一方法是将“ disabled”属性数据绑定为一些返回“ true”或“ false”值的后端变量。

就像是：

<mat-slide-toggle 
[id]='data.id' 
class="status" 
[disabled]='disableVariable'
>Active
</mat-slide-toggle>

然后：

disableVariable = someFunction(); //that returns true or false

这行得通，但是变量太通用了，我的意思是，每个滑块都将被禁用。另一个问题是，这不是“实时”的，因此我无法多次禁用和启用。
基本上，它不起作用。

我在这里应该做什么？如果我有办法使用其唯一ID选择那些标签，那将解决问题，但是jQuery或Javascript的Query选择器都不能禁用或启用此标签。

编辑：

我的代码还有一点：

    <div id="table" *ngFor="let data of User; let i = index">

        <div [id]='data.id' *ngIf='data.user== 0' class="item">

            <label class="container" style="width: 90%">

                <input
                type="checkbox" 
                *ngIf='data.status== 0' 
                id={{i}} 
                class="checkbox" 
                color=primary
                checked>

                <span class="checkmark"></span>

                <div *ngIf='data.status== 0'>{{data.name}}

                    <mat-slide-toggle 
                    [id]='data.id' 
                    (change)=toggle(data.id) 
                    *ngIf='data.status== 0'
                    color=primary 
                    class="status" 
                    >Active
                    </mat-slide-toggle> …

我有一个简单mat-table的mat-paginator。

默认设计如下：

我想更改范围标签的放置并将其放在导航按钮之间，如下所示：

基本上，我需要将div.mat-paginator-range-label元素从此容器的顶部移至button.mat-paginator-navigation-previous和之间button.mat-paginator-navigation-next。

有什么想法吗？谢谢。

您好我心爱的社区，

与角材一起使用角材。

使用默认配置打开材质对话框时，背景会稍微变暗。现在，我希望它成为模糊的背景。我尝试使用css样式，但是无法更改窗口的背景（无法在组件模板中获取正确的选择器）。

我浏览了文档，但是那里什么也没有。我可以使用这些样式，因为我确信可能会有一些棘手的方法，但是考虑到暗化效果已经是开箱即用的了，我认为开箱即用也应该有主题功能。你认为呢？

我正在使用重要的日期选择器组件，我想限制日期选择器组件中的未来日期，在浏览时我找到了解决 方案solution1，solution2，但是这些解决方案适合于普通日期选择器。但是我想限制重要的日期选择器。如果可能，请提供此DEMO中的解决方案。