标签: angular-material

仅当用户选择一个选项时，我才尝试在 Angular 材料中的下拉列表（选择组件）的右侧添加一个清晰的图标。如果用户单击“清除”图标，我想删除该值并重置该字段。到目前为止，我有下拉菜单并努力正确显示图标。有人能指出我正确的方向吗？提前致谢。

这是我的代码：

<mat-form-field appearance="fill">
  <mat-label>Select a food</mat-label>
  <mat-select>
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{food.viewValue}}
    </mat-option>
    <mat-select-trigger>
        <button>
           <mat-icon>clear</mat-icon>
       </button>
    </mat-select-trigger>
  </mat-select>
</mat-form-field>

这是现场演示

我按照这个例子来实现角度材料表。

https://stackblitz.com/angular/jejeknenmgr?file=src%2Fapp%2Ftable-basic-example.ts

在这里，我使用下面的 CSS 代码更改了标题颜色。

.mat-header-cell {
    background: red;
}

我想从组件传递标题颜色而不是静态 CSS 方式。有没有办法动态改变标题颜色？

html:

            <mat-form-field>
                <input matInput [matDatepicker]="picker1" placeholder="From date: mm/dd/yyyy" name="from_date"
                       [(ngModel)]="callListRequestOb.from_date" maxlength="150">
                <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
                <mat-datepicker #picker1></mat-datepicker>
            </mat-form-field>

在方法中：

        this.callListRequestOb.from_date = new Date(this.callListRequestOb.from_date).toISOString().slice(0, 10);

当我在日期选择器中选择日期时，它会选择正确的日期。但是当我单击搜索按钮（我不包括它）时，选择时间显示落后日期。我正在开发 Angular 9。我该如何解决这个问题？

我正在尝试使我的输入字段具有圆形轮廓。该字段位于单选按钮中。

我的 HTML 是：

<mat-radio-group aria-label="Select an option">
    <mat-radio-button value="1">
        <form class="example-form">
            <mat-form-field appearance="outline" class="example-full-width">
                <input type="text" placeholder="Input" matInput [formControl]="myControl">
            </mat-form-field>
        </form>
    </mat-radio-button>
    &nbsp;
    <mat-radio-button value="2">All</mat-radio-button>
</mat-radio-group>

CSS：

.example-form {
  min-width: 150px;
  max-width: 500px;
  width: 100%;
}

.example-full-width {
  width: 100%;
}

::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-end {
  border-radius: 30px !important;
}
::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-start {
  border-radius: 30px !important;
}

当我更改边框半径以获得所需的轮廓时，结果是：如何删除左侧的线？

在 Angular Material 步进器上，stepControl每个属性都有一个mat-step包含表单的属性。物业是做什么的stepControl？

<mat-step [stepControl]="registrationForm">

如果表单无效，该功能似乎将不允许进入下一步，但只是想仔细检查。

更新- 主线程帖子底部的解决方案 -

样式.scss

@import "./material";

$pace-red: #bb2d1c;
$green: #008000;
$red: #f00;
$black: #000;

body {
  margin: 0;
}
...

自定义主题 - Material.scss

@use '~@angular/material' as mat;
@import '@angular/material/theming';
@include mat.core();

$core-app-primary: mat.define-palette(mat.$red-palette, A700);
$core-app-accent: mat.define-palette(mat.$blue-palette, 500);
$core-app-warn: mat.define-palette(mat.$amber-palette, 800);
$core-app-theme: mat.define-light-theme($core-app-primary, $core-app-accent, $core-app-warn);

@include mat.all-component-themes($core-app-theme);
...

我收到一条错误消息，指出由于 @use，它无法构建模块。我也尝试过使用@use '~@angular/material' as mat;，但这并没有改变错误。

包.json

{
  "name": "xxxxx-core-cli",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng-high-memory": "node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng",
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test", …

我在 Chrome 和 Firefox 中运行相同的 Anuglar (mat-table) html。Chrome 有一个滚动条来滚动表格单元格，而 Firefox 则重叠文本

    <td
      style="
        min-width: 160px;
        max-width: 400px;
        text-overflow: clip;
        overflow: hidden;
        overflow-x: scroll;
        white-space: nowrap;
      "
      mat-cell
      *matCellDef="let element"
    >

铬合金：

火狐浏览器

我可以控制mat-select两个mat-optgroup具有事件处理程序的组(selectionChange)="applicationSelected($event.value, i)。

如何检测从哪个组中选择了选项？

任何人都可以帮我解释为什么它说“无法绑定到'formControl'，因为它不是'input'的已知属性。” 即使我已经导入了我的模块，并且我还有另一个使用 FormControl、FormGroup 或两者的组件，但它并没有给我带来这种错误，但这个却出现了。我不太确定为什么我一直收到此错误。

我已经在 app.module.ts 文件中导入了 ReactiveFormsModule 。我可以在其他组件中使用 formControl，但不确定为什么不能在此组件中使用。

超文本标记语言

<div class="component">
    <mat-chip-list *ngIf="editMode" #chipList >
         <div>
            <mat-chip> </mat-chip>
         <div>
            <div >
                <input matInput  #input  [formControl]="tagCtrl2"  [(ngModel)]="tagIn"  placeholder="Select or Create a tag" [matAutocomplete]="auto"
                    (focusout)="hideTagInput()" (keyup.enter)="addTag()"(keyup.escape)="hideTagInput()"
                    (keydown.backspace)="$event.stopPropagation();" (keydown.space)="$event.stopPropagation();" [matChipInputFor]="chipList" />
            </div>

            <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
                <mat-option *ngFor="let tag of filteredTags | async" [value]="tag">
                    {{tag}}
                </mat-option>
            </mat-autocomplete>

    <mat-chip-list>
</div>

TS

import { FormControl } from '@angular/forms';

export class TagsComponent implements OnInit {
   tagCtrl2 = new FormControl();

下图显示了我所追求的设计以及目前角度 15 的输出。

<div class="form-field-container">
   <h3>Email</h3>
   <mat-form-field appearance="outline">
      <input matInput type="email" id="Email" name="Email" formControlName="email" />
   </mat-form-field>
</div>

这就是我迄今为止尝试过的风格。但这些都不起作用。即边框仍然是圆形的，并且颜色必须改变。如何使边框看起来像设计一样？

.input {
  background-color: #E5ECF5 !important;
  color: #001050 !important;
  letter-spacing: 0.05em;
}

.mdc-text-field {
  font-size: 12px;
  font-weight: 500;
  color: #001080 !important;
  background-color: #E5ECF6 !important;
  border-radius: 0px !important;
  letter-spacing: 0.05em;
}

.mat-mdc-form-field-appearance-outline {
  border-color: #001050 !important;
  border-radius: 0px !important;
}

.mat-form-field-outline-start,
.mat-form-field-outline-end {
  border-radius: 0 !important;
  border-color: #001080 !important;
}

.mat-mdc-form-field-error-wrapper {
  padding: 0px !important;
  margin: 0px !important;
  font-size: 9px;
  font-family: 'Roboto';
  font-weight: 600; …