我需要让 Angular 中的日期选择器始终可见。日历将始终可见而不依赖于按钮（不需要单击按钮）
源.html
<mat-form-field>
<input matInput [matDatepicker]="picker" placeholder="Choose a date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
当<mat-menu>用于<mat-form-field>它时，它从输入中获取焦点。我希望用户能够在菜单打开时使用输入。
这可能吗？
<mat-form-field appearance="outline" [matMenuTriggerFor]="appMenu">
<mat-label>Label color</mat-label>
<div class="color-container">
<div class="color-dot" [style.backgroundColor]="label.color"></div>
</div>
<input #input matInput class="pl-2" [(ngModel)]="label.color">
</mat-form-field>
<mat-menu #appMenu="matMenu" yPosition="below" [overlapTrigger]="false">
<mat-grid-list cols="8" rowHeight="30px">
<mat-grid-tile *ngFor="let color of colors">
<div mat-menu-item class="menu-item">
<div class="color-dot" [style.backgroundColor]="color"
(click)="label.color = color"></div>
</div>
</mat-grid-tile>
</mat-grid-list>
</mat-menu>
我使用Angular 6.0.8同Angular Material theme版本6.4.0
每当我尝试稍微修改材质主题时，它永远不会起作用，因为我总是发现材质主题属性会覆盖我的 CSS 属性，如下所示：
currentColor .mat-input-element (material theme)
initial input, textarea, select, button (user agent stylesheet)
#1072BA .English
#1072BA .English
#1072BA body仅应用第一个属性（其余的被删除）
我尝试了多种变体来解决这个问题，但没有一个奏效（比如使用重要的或改变导入主题的顺序）
那么在 Material 主题和用户样式表中更改小东西的正确方法是什么？（例如，应用此英语规则）
我的styles.scss如下，它运行良好，只有覆盖颜色和字体等材质主题不起作用：
@import '~@angular/material/prebuilt-themes/indigo-pink.css';
/* You can add global styles to this file, and also import other style files */
/* prevent clicking in the wizard nav header */
.mat-horizontal-stepper-header{
pointer-events: none !important;
}
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(./assets/material_icons/material_icons.woff2) …我有一个相当基本的幻灯片切换。我想在切换滑块后执行 HTTP 调用，如果我的 HTTP 调用失败，请将滑块恢复为初始值。我已经做了如下：
import {Component} from '@angular/core';
import { MatSlideToggleChange } from '@angular/material';
import { FakeService } from './fake.service';
@Component({
selector: 'slide-toggle-configurable-example',
templateUrl: 'slide-toggle-configurable-example.html'
})
export class SlideToggleConfigurableExample {
isChecked = false;
isCheckedInit = false;
constructor(private readonly fakeService: FakeService) {}
onChange(value: MatSlideToggleChange) {
const { checked } = value;
this.fakeService.throwUp(checked).subscribe(
() => {},
() => {
this.isChecked = this.isCheckedInit;
}
);
}
}
然而这行不通。我的模板看起来像这样：
<mat-slide-toggle
(change)="onChange($event)"
[checked]="isChecked">
Slide me!
</mat-slide-toggle>
<section>
{{ isChecked }}
</section>
但是isCheckedvalue …
我有日期选择器，它应该通过复选框切换单击动态禁用和启用。来自库角材料 6 的所有组件。由于我对表单处理程序使用反应式方法，我不能简单地使用[disable]指令。我得到了进一步的错误：
It looks like you're using the disabled attribute with a reactive form directive. If you set disabled to true
when you set up this control in your component class, the disabled attribute will actually be set in the DOM for
you. We recommend using this approach to avoid 'changed after checked' errors.
Example:
form = new FormGroup({
first: new FormControl({value: 'Nancy', disabled: true}, Validators.required),
last: new FormControl('Drew', Validators.required)
});
我有想法直接在 TS 中替换FormContolinside FormGroup …
我已经习惯于取消订阅我在组件中初始化的订阅。推荐的方法是takeUntil像这样使用运算符：
killSubscriptions: new Subject<any> = new Subject();
ngOnInit(){
observableThing().pipe(takeUntil(this.killSubscriptions)).subscribe()
}
ngOnDestroy(){
this.killSubscriptions.next();
this.killSubscriptions.complete();
}
但是前几天我正在使用覆盖和门户服务实现一个自定义对话框，并且我在Angular Material Library中的一个方法中间遇到了这个代码块。
// When the dialog backdrop is clicked, we want to close it.
if (config.hasBackdrop) {
overlayRef.backdropClick().subscribe(() => {
if (!dialogRef.disableClose) {
dialogRef.close();
}
});
}
这个订阅是如何清理的？我唯一的猜测是在overlayRef处理时，订阅被清理。但是如何？
还有其他时候我们不需要处理取消订阅吗？
我在角度材料本身中尝试了 xPosition 和 yPostion 。但它不起作用。我不知道我是否错过了什么。
<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu" xPosition="after">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
</mat-menu>
我提到了几个链接，表明问题已解决。参考这里。
我想不通。
提前致谢。
在我的Angular 7应用程序下，我使用的是 mat-select 组件：
<mat-form-field class="col-md-3" color="warn">
<mat-select placeholder="Selectionner le code Edo"
id="codeEdo"
[(value)]="selectedCodeEdoValue"
ngDefaultControl
formControlName="codeEdo">
<mat-option (onSelectionChange)="onEdoSelectionChanged(edo )"
*ngFor="let edo of shopsList"
[value]="edo.edoId">
{{edo.edoId}}
</mat-option>
</mat-select>
</mat-form-field>
我的选项数据如下：
let shopsList= [
{
'edoId': '4010',
'storeName': 'ABBEVILLE'
}
,
{
'edoId': '3650',
'storeName': 'AGEN'
}
,
{
'edoId': '3298',
'storeName': 'AIX ALLEES PROVENCALES'
}
];
我的目的是在选择一个选项时获取选定的对象数据，而不仅仅是值
例如，当我选择第一个选项时，我想得到这个：
result = {
'edoId': '4010',
'storeName': 'ABBEVILLE'
}
不仅是值“4010”
正如你所看到的，我试过这个： (onSelectionChange)="onEdoSelectionChanged(edo )
但这总是激发我两个事件 …
javascript angular-material angular-material2 angular angular6
我mat-tree在 API 调用子节点上的子节点中使用非常大的数据集，大约有 3k 条记录，我正在做的是通过在数据源下添加来自 API 的子项并重新渲染来更新数据源
this.dataSource.data = updatedDataDource;
重新渲染需要超过 15 秒，这是不可接受的。
有什么方法可以让我只重新渲染那个节点和来自 api 的关联子节点（我的意思是部分渲染）。如果有人有同样的问题，请帮助。
我正在尝试根据按钮单击等操作从不同的路由组件加载 mat-sidenav 中的不同组件？
我创建了一个单例服务“SidenavService”来使用@ViewChild 获取对 mat-sidenav 的引用，这样我就可以从应用程序的任何位置控制（如打开、关闭、切换等）sidenav。
我还在 mat-sidenav 中创建了一个 ng-container 并将其 ViewConteinerRef 存储在 SidenavService 中，现在在组件层次结构中的任何组件中，我可以注入 SidenavService 并且我可以使用 ViewConteinerRef 创建嵌入式视图。
stackblitz 链接 https://stackblitz.com/edit/angular-material-sidenav-dynamic-content
有没有更好的方法来实现这一目标？从应用程序的任何位置在 mat-sidenav 中加载不同的组件。