angular-material 相关问题

角度垫表插入后不刷新

当我插入一本新书时，我想刷新我的角材料表（mat-table）。 该表不会自动刷新，我必须刷新浏览器才能看到插入的新书。 步骤 ...

Angular Material 拖放堆叠的扑克牌并在悬停时自动展开

如何使用 Angular Material 和拖放功能实现以下行为？我希望能够在鼠标悬停时看到卡片完全展开，因此下面的其他卡片只需移动

SassError：找不到要导入的样式表。 @使用'~@angular/material'作为垫子；

我使用 CLI 创建了一个 Angular 项目。我正在使用 SCSS，并且我将 Angular Material 包含在自定义主题 iirc 中。我添加了几个虚拟组件，应用程序仍然构建得很好。然后我需要

Angular 7 - 虚拟滚动条在滚动时重置多选中的所选项目

我有一个多选下拉菜单，里面有虚拟滚动条。 网页 配料 我有一个多选下拉菜单，里面有虚拟滚动条。 HTML <mat-form-field> <mat-label>Toppings</mat-label> <mat-select [formControl]="multiSelectControl" multiple [(value)]="selected" (openedChange)="openChange($event)"> <cdk-virtual-scroll-viewport itemSize="5" minBufferPx="200" maxBufferPx="400" [style.height.px]=5*48> <button (click)="selectAll()">Select All</button> <button (click)="clear()">Clear</button> <mat-option *cdkVirtualFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option> </cdk-virtual-scroll-viewport> </mat-select> </mat-form-field> .ts 文件： export class AppComponent { title = 'test-proj'; toppings = new FormControl(); toppingList: string[] = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato']; selected: any; @ViewChild(CdkVirtualScrollViewport) cdkVirtualScrollViewPort: CdkVirtualScrollViewport; multiSelectControl = new FormControl(); constructor() { for (let i = 0; i < 4000; i++) { this.toppingList.push('gjkgkf--' + i); } } selectAll() { this.selected = this.toppingList; this.multiSelectControl.patchValue(this.toppingList); } clear() { this.selected = []; this.multiSelectControl.patchValue([]); } openChange($event: boolean) { if ($event) { this.cdkVirtualScrollViewPort.scrollToIndex(0); this.cdkVirtualScrollViewPort.checkViewportSize(); } } 我在下拉列表中添加了 4000 个项目。如果我选择前两项和最后两项并滚动，则前两项的选择检查就会消失。 请提出建议。谢谢 我已经为错误本身创建了一种解决方法。它使用 onSelectionChange 元素的 mat-option。最重要的是，它还会检查选项列表上的更改，并在必要时进行选择。这是未经优化的原始代码，但您会明白的： @ViewChildren(MatOption) options: QueryList<MatOption>; constructor(private cd: ChangeDetectorRef) {} ngAfterViewInit(): void { this.options.changes.subscribe(() => { let needUpdate = false; this.options.forEach((option) => { const selected = this.selected.includes(option.value); if (selected && !option.selected) { option.select(); needUpdate = true; } else if (!selected && option.selected) { option.deselect(); needUpdate = true; } }); if (needUpdate) { this.cd.detectChanges(); } }); } onSelectionChange(change): void { if (!change.isUserInput) { return; } const value = change.source.value; const idx = this.selected.indexOf(change.source.value); if (idx > -1) { this.selected.splice(idx, 1) } else { this.selected.push(value); } } 这就是mat-select： <mat-select [formControl]="multiSelectControl" multiple [value]="selected" (openedChange)="openChange($event)"> <cdk-virtual-scroll-viewport itemSize="5" minBufferPx="200" maxBufferPx="400" [style.height.px]=5*48> <button (click)="selectAll()">Select All</button> <button (click)="clear()">Clear</button> <mat-option *cdkVirtualFor="let topping of toppingList" [value]="topping" (onSelectionChange)="onSelectionChange($event)">{{topping}}</mat-option> </cdk-virtual-scroll-viewport> </mat-select> 使用有效的 stackblitz 请注意，如果您有一个可以更新其内容的动态列表，并且已从该列表中删除了所做的选择，那么它仍然会被选择，即使这不再可能了 首先，确保导入ScrollingModule。 我相信答案是向您的 *cdkVirtualFor 添加一个 trackBy 函数 *cdkVirtualFor="let topping of toppingList; trackBy: trackByName; templateCacheSize: 0" trackByName(index: number, item: string): string { return item; } 如果您有重复的名称，那么您可以尝试按索引进行跟踪，但我更喜欢为每个项目使用自定义 ID。一些能让他们独一无二的东西。 如果您正在处理动态数据，我还会添加 templateCacheSize: 0。

如何将 mdButton 文本设置为小写？

正如您从这里看到的，mdButton 会将您的文本设置为大写字母。如果我想变成小写怎么办？

当我导航到 URL“http://localhost:4200/”时，它会将我重定向回来

login.components.ts： 从 '@angular/core' 导入 {Component, OnInit}； 从“@angular/forms”导入{FormBuilder、FormGroup、ReactiveFormsModule、Validators}； 从 &... 导入 {AuthService}

mat-paginator 长度不起作用。无法设置它

我试图在点击分页时调用API。最初，我有 静态设置长度并且工作正常。我能够做一个 分页API调用。然后我尝试设置长度

如何在垫选择工作中进行双向绑定

我有以下代码： 无 我有以下代码： <mat-form-field> <mat-select [(ngModel)]="valueFromDB.name"> <mat-option>None</mat-option> <mat-option *ngFor="let option of options" [value]="option.name" >{{option.name}}</mat-option > </mat-select> </mat-form-field> valueFromDB = new Option('Option'); 我想在加载时我选择了选项2。但我的选择是空的。我究竟做错了什么？ 工作示例在这里。 我怀疑它不起作用，因为选项“Option”不在数组选项中。确保数组中确实存在这样的字符串“Option”。例如，如果你有这个数组 options = [ new Option('Option1'), new Option('Option2'), new Option('Option3'), ]; 这里你不能有“Option”，而是“Option1”或数组中的另一个valueFromDB = new Option('Option1');

如何使用 Material Angular 设置多选日历？

我有一个日历，但我只能设置一个日期，并且我希望能够设置多个日期。我在官方文档中没有看到任何内容（https://material.angular.io/components/datepicker/overv...

Mat-Tab-Group 在单击之前不会加载

所以我的角度项目遇到了问题。当应用程序首次加载时，选项卡不会显示。但是，一旦我单击该应用程序，选项卡就可以正常工作。 相关...

如何删除 Angular 中对话框背景上的白色图层？

我正在尝试为我的 MatDialog 组件制作透明背景。这是代码： 父组件.html 打开对话框（）{ const 对话框配置 = 新 MatDialogConfig(); 对话框配置.width = '...

Angular 17 | Angular Material 17.3.1 Angular Material 菜单组件样式问题

我目前正在使用 Angular 17 和 Angular Material 17.3.1，并且在设置菜单组件样式时遇到问题。具体来说，我正在尝试调整菜单项的高度，但是...

为什么我的角度材质 css 文件不起作用？

我使用角度材料创建了一个 html 文件。但组件 css 文件已不适用。 我的 html 文件； ... 我使用角度材料创建了一个 html 文件。但组件 css 文件已不适用。 我的 html 文件； <div class="content-container"> <div class="tree-container"> <mat-tree [dataSource]="dataSource" [treeControl]="treeControl"> <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding class="tree-node"> <button *ngIf="node.isAction" mat-button (click)="openForm(node.name, node.parentName)">{{node.name}}</button> </mat-tree-node> <mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding> <button mat-icon-button matTreeNodeToggle> <mat-icon> {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}} </mat-icon> </button> {{node.name}} <button *ngIf="node.isAction" mat-button (click)="openForm(node.name, node.parentName)">{{node.name}}</button> </mat-tree-node> </mat-tree> </div> <div class="form-container" *ngIf="isFormVisible"> <ng-container *ngComponentOutlet="selectedFormComponent"></ng-container> </div> 我的CSS文件； .mat-tree-node { display: flex; align-items: center; flex: 1; word-wrap: break-word; min-height: var(--mat-tree-node-min-height); transition: background-color 0.3s ease; cursor: pointer; } .tree-container { flex: 1; max-width: 50%; padding: 20px; background-color: #f0f0f0; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); overflow: hidden; } 我没有提供整个 css 文件。 我尝试了很多类似的事情； 封装：ViewEncapsulation.None，尝试使用不同的浏览器。但他们没有工作。有人可以帮助我吗？ 如果您需要将样式应用于主机组件，它可以与 encapsulation: ViewEncapsulation.None 一起使用。 确保您进行了以下更改： 注入 ViewEncapsulation.none 选项： @Component({ selector: 'app-selector', templateUrl: './app.component.html', encapsulation: ViewEncapsulation.None, standalone: true, styleUrls: ['./app.component.scss'], imports: [MatTreeModule, MatIconModule, NgIf, NgComponentOutlet, MatButtonModule], }) 和风格： app-selector { .mat-tree-node { display: flex; align-items: center; flex: 1; word-wrap: break-word; min-height: var(--mat-tree-node-min-height); transition: background-color 0.3s ease; cursor: pointer; } .mat-tree { flex: 1; max-width: 50%; padding: 20px; background-color: #f0f0f0; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); overflow: hidden; } }

我应该如何使用 transloco i18n（国际化）库更改材料表标题以进行分页和页面范围、下一个、上一个按钮？

想要使用 i18n 显示标题 上面是显示标题“每页项目”的图片

如何在 Angular 17 中重用 Angular 材质表？

我创建了一个子组件并使用 Angular Material。我正在显示传递给父组件的动态数据。我无法操作图标和名称，以便我可以在父组件中传递事件...

角度材质图标不显示

我开始了一个基于Angular 17的新项目，我使用Angular Material作为组件，但图标没有显示。我已经检查了所有内容，但我不知道问题出在哪里。 我

如何从所有页面的mat-table中获取排序后的数据？

我正在寻找一种方法来提取排序数据并将其保存在mat-table的dataSource的sortedData下，以便将其保存到CSV文件。数据源应用了过滤器和分页......

在输入字段中向上推文本，使用 Angular V14.2.7 键入时间

我面临的问题是，我们有一个输入字段类型时间，其中文本被推得比正常输入字段更高。 我知道这个问题的根本原因可能是...

内圈垫桌角料

我想制作一个循环来显示我的角度材料表中的一些数据，但我无法做到这一点，因为我不知道如何做。 // 我想制作一个循环来显示我的角度材料表中的一些数据，但我无法做到这一点，因为我不知道如何做。 // <img src=" assets/{{element[col.key][0].position}}.jpg alt="img"> // this way works out of the loop. ts.file columns = [ {key: 'position', display ...., config : {isPosition:true}}, ]; 材质.表.组件 <ng-container *ngFor="let col of columns"> <ng-container *ngIf="col.config.isPosition"> <div *ngFor="let element of col.config.isPosition"> <img src=" assets/{{element[col.key].position}}.jpg alt="img"> </div> </ng-container> </ng-container> 您不能将 *ngFor 用于有角度的材料表。你必须遵守实施规则。 您必须在 .ts 文件中定义数据，如下所示，然后您可以将其绑定到 tr，如 *matRowDef="let row; columns: displayedColumns;"。 这是来自 Angular Material 官方网站的示例，可在 here 中找到。 HTML： <table mat-table [dataSource]="dataSource" class="mat-elevation-z8"> <ng-container matColumnDef="position"> <th mat-header-cell *matHeaderCellDef> No. </th> <td mat-cell *matCellDef="let element"> {{element.position}} </td> </ng-container> <ng-container matColumnDef="name"> <th mat-header-cell *matHeaderCellDef> Name </th> <td mat-cell *matCellDef="let element"> {{element.name}} </td> </ng-container> <ng-container matColumnDef="weight"> <th mat-header-cell *matHeaderCellDef> Weight </th> <td mat-cell *matCellDef="let element"> {{element.weight}} </td> </ng-container> <ng-container matColumnDef="symbol"> <th mat-header-cell *matHeaderCellDef> Symbol </th> <td mat-cell *matCellDef="let element"> {{element.symbol}} </td> </ng-container> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> </table> TS： import {Component} from '@angular/core'; export interface PeriodicElement { name: string; position: number; weight: number; symbol: string; } const ELEMENT_DATA: PeriodicElement[] = [ {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'}, {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'}, {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'}, {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'}, {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'}, {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'}, {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'}, {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'}, {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'}, {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'}, ]; @Component({ selector: 'table-basic-example', styleUrls: ['table-basic-example.css'], templateUrl: 'table-basic-example.html', }) export class TableBasicExample { displayedColumns: string[] = ['position', 'name', 'weight', 'symbol']; dataSource = ELEMENT_DATA; } 结果： 为了实现 img 标签，您可以创建一个包含图像 src 的对象，并将其映射到自己的列，然后在 DOM 中使用该对象。 在线程上有点太晚了，但是，我能够在我的应用程序上解决这个类似的问题。与第一个答案相反，我们可以在 ng 表上使用 *ngFor。 <table mat-table [dataSource]="materials"> <ng-container *ngFor="let col of columns;" [matColumnDef]="col"> <th mat-header-cell *matHeaderCellDef> {{ col | uppercase }} </th> <td mat-cell *matCellDef="let material"> {{ material[col] }} </td> </ng-container> <tr mat-header-row *matHeaderRowDef="columns"></tr> <tr mat-row *matRowDef="let row; columns: columns;"></tr> </table> 代码中的material[col]部分是这个问题的关键部分。基本上，如果我们尝试访问 material，它就是数组的单个 json。该 json 包含我们希望在 columns 中定义的每个属性。要访问 json 的每个属性，我们只需要调用 json[propertyNameInString]，在我们的例子中是 material[col]。

在 Angular Material 中处理 mat-radio-button 表单值访问器

我有一个 mat radio group 组件，它还呈现表单字段列表 <... 我有一个垫子单选组组件，它还呈现表单字段列表 <form *ngIf="myRatesForm.controls.items.controls.length > 0" [formGroup]="myRatesForm"> <mat-radio-group formArrayName="items"> <div [formGroupName]="i" *ngFor="let myRate of myRatesForm.controls.items.controls; let i = index"> <mat-radio-button [checked]="myRate.isFavorite" formControlName="isFavorite" [value]="myRate"> <div class="flex"> <mat-form-field appearance="outline"> <input formControlName="name" matInput placeholder="Taux" /> </mat-form-field> <div (click)="inputFocus($event)"> <mat-form-field appearance="outline"> <input formControlName="rateValue" matInput placeholder="Taux" /> </mat-form-field> </div> </div> </mat-radio-button> </div> </mat-radio-group> </form> 在我的 ts 文件中，我正在创建一个动态 formArray itemsForm: FormArray = this.fb.array([]); myRatesForm = new FormGroup({ items: this.itemsForm, }); constructor(private store: Store, private pricesSelector: PricesSelector, private fb: FormBuilder) {} myRates: MyRates[] = []; subscription$: Subscription = new Subscription(); favoriteRate: MyRates; ngOnInit(): void { this.subscription$ = this.store.select(this.pricesSelector.getPriceTaxValue).subscribe(data => { this.myRates = data.myRates; this.myRates.map(rate => { this.myRatesForm.controls.items.push( this.fb.group({ name: [rate.name, Validators.required], rateValue: [rate.rateValue, Validators.required], isFavorite: [rate.isFavorite], }) ); }); }); } 实际上名称和rateValue表单控件正在工作。 但是单选按钮isFavorite不起作用。我收到此错误 NG01203：表单控制路径没有值访问器：'items -> 2 -> 是最喜欢的。查找更多... 我认为 因为 FormControlName 未设置为 mat-radio-group 有办法吗？ 单选组是垫单选按钮的逻辑分组，因此我们需要将单选组移动到单独的表单控件favourited这将包含所选值，然后我们可以渲染没有表单控件名称的单选按钮！ 提供代码和 stackblitz 的工作示例！ 代码 ts import { CommonModule } from '@angular/common'; import { Component } from '@angular/core'; import { FormArray, FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators, } from '@angular/forms'; import { MatFormFieldModule } from '@angular/material/form-field'; import { MatRadioModule } from '@angular/material/radio'; import { MatInputModule } from '@angular/material/input'; import { Subscription } from 'rxjs'; /** * @title Radios with ngModel */ @Component({ selector: 'radio-ng-model-example', templateUrl: 'radio-ng-model-example.html', styleUrl: 'radio-ng-model-example.css', standalone: true, imports: [ FormsModule, CommonModule, MatFormFieldModule, MatRadioModule, MatInputModule, ReactiveFormsModule, ], }) export class RadioNgModelExample { itemsForm: FormArray = this.fb.array([]); myRatesForm = new FormGroup({ favourited: new FormControl(), items: this.itemsForm, }); constructor(private fb: FormBuilder) {} myRates: any[] = []; subscription$: Subscription = new Subscription(); favoriteRate: any; ngOnInit(): void { this.myRates = [ { name: 'test1', rateValue: 1, isFavorite: true }, { name: 'test2', rateValue: 2, isFavorite: false }, { name: 'test3', rateValue: 3, isFavorite: false }, ]; this.myRates.map((rate) => { this.myRatesForm.controls.items.push( this.fb.group({ name: [rate.name, Validators.required], rateValue: [rate.rateValue, Validators.required], isFavorite: [rate.isFavorite], }) ); }); } } html {{myRatesForm.value | json}} <form *ngIf="myRatesForm.controls.items.controls.length > 0" [formGroup]="myRatesForm" > <mat-radio-group formControlName="favourited"> <div formArrayName="items"> <div [formGroupName]="i" *ngFor="let myRate of myRatesForm.controls.items.controls; let i = index" > <mat-radio-button [value]="myRates[i]" [checked]="myRates[i].isFavorite" ></mat-radio-button> <div class="flex"> <mat-form-field appearance="outline"> <input formControlName="name" matInput placeholder="Taux" /> </mat-form-field> <div> <mat-form-field appearance="outline"> <input formControlName="rateValue" matInput placeholder="Taux" /> </mat-form-field> </div> </div> </div> </div> </mat-radio-group> </form> Stackblitz 演示