angular-material 相关问题

如何根据属性将类应用到活动的“角度材质”选项卡？

我有一个名为editMode的属性。当 editMode 为 true 时，如何将此 CSS 类仅应用于活动选项卡？ .tab-活动-编辑模式{ 顶部边框：无！重要； 底部边框：2px 实心 #0078...

错误错误：带有 Angular Material ang 标签的 NG0502 <p>

按照 Angular Material 的指南，我想将此代码放入我的表单中。 但出现错误： 错误错误：NG0502：在水合过程中，Angular 无法使用“

为什么我无法编辑垫子按钮填充？

mat-button的默认填充，我需要订阅默认填充（16px） 我一直在尝试设置垫子按钮的填充，但组件的样式没有改变。我能做什么，我有...

为什么粘性/固定元素的一部分会在移动浏览器中脱离屏幕？

在桌面浏览器中一切正常。但在移动浏览器中，无论如何首先滚动约 20px。较高元素中的所有边距和填充 = 0。你能帮我解决这个问题吗？ HTML： 在桌面浏览器中一切正常。但在移动浏览器中，无论如何首先滚动约 20px。较高元素中的所有边距和填充 = 0。你能帮我解决这个问题吗？ HTML： <mat-toolbar color="primary"> <app-my-svg style="min-width: 50px; max-width: 70%; padding-top: 10px;" #svgAnima class="svg-image" id="svgAnima" [mat-menu-trigger-for]="menu"> </app-my-svg> <div class="hamburger"> <mat-menu #menu="matMenu"> <nav class="menu"> <a mat-menu-item (click)="item.fun ? item.fun() : '' " *ngFor="let item of menuItems">{{ item.label }} </a> </nav> </mat-menu> </div> <div class="navBar"> <button mat-flat-button color="primary" (click)="item.fun ? item.fun() : '' " *ngFor="let item of menuItems" class="menuBar"> {{item.label }} </button> </div> <span>Zastroycogramm </span> </mat-toolbar> CSS： mat-toolbar { position: -webkit-sticky; position: sticky; top: 0px; left: 0px; z-index: 50; max-height: 200px; width: 100%; } .menu { flex: 1; font-family: Roboto, 'Helvetica Neue', sans-serif; } @media (min-width: 1000px) { .navBar { display: flex; width: 100%; align-items: center; font-family: Roboto, 'Helvetica Neue', sans-serif; } .hamburger { display: none; } } @media (max-width: 999px) { .navBar { display: none; } .hamburger { display: flex; width: 100%; } } 我是一名新手程序员，下面我将添加您需要澄清这个问题的信息 我刚刚在CSS html中添加了body { height: 100% }

如何使 HTML 文本不可选择用于输入

我一直在尝试使 HTML 输入中的某些文本在角度上无法选择。 我参考过之前的问题，例如 make html text unselectable 目前的文本是我...

更改（增加）Mat-Form-Field 的边界半径

我正在一个使用 Material 的 Angular 项目中工作。 我有一些带有轮廓外观输入的垫子表单字段。我想更改轮廓的边框半径（增加它）。 我读了一遍...

错误：mat-form-field 必须包含 MatFormFieldControl 并且表单字段的样式不正确

我正在尝试为我的应用程序构建一个表单。这些字段是可见的，但没有按照 Angular Material 的规定显示。另外，mat-toolbar 组件无法正确显示...

有没有办法使用角度材料拖放来调整大小

我正在使用 Angular 和 Material 创建一个 Web 应用程序，我希望能够拖放和调整我的部分的大小。有没有办法使用 Angular Material 拖放 CDK 来完成？

如何使用 *ngFor 连接 Angular 中 p-dropdown 选项中 optionLabel 中的两个属性？

我需要连接两个属性并将其显示在 Angular 的 p 下拉列表中的 optionLabel 中？我可以在 mat-select 中执行此操作，但不能在 p-dropdown 中执行此操作。 任何转换以下内容的帮助...

角度材质滑块拖动时数据绑定

我正在尝试使用材质滑块控制音频音量。就像 YouTube 音频滑块一样。我使用两种方式的数据绑定，如下所示： 我正在尝试使用材质滑块控制音频音量。就像 YouTube 音频滑块一样。我使用这样的两种方式数据绑定： <mat-slider min="0" max="1" step="0.01" [(value)]="settingsService.audioTick.volume"></mat-slider> 问题是，只有当我停止拖动滑块时，该值才会更新。这是一种糟糕的用户体验，因为我无法立即得知该音量是否良好。所以我需要在拖动时进行数据绑定。 这是一个 StackBlitz：https://stackblitz.com/angular/rojampjmlap 有什么想法吗？ 您可以使用 [value] 属性绑定语法将 someValue 作为 @Input 传递给 MatSlider。 MatSlider 有一个定义为 @Output 的 input 属性，当 input 值更改时会触发该属性。您可以收听该内容，然后将作为 $event 数据返回的任何内容重新分配给 someValue。 在这里，尝试一下： 模板： <mat-slider (input)="someValue = $event.value" [value]="someValue"> </mat-slider> {{ someValue }} 组件： import {Component} from '@angular/core'; @Component({...}) export class SliderOverviewExample { someValue = 0; } 这是更新的 示例 StackBlitz 供您参考。 您需要绑定到 input 输出属性才能获取实时数据更改。示例： <mat-slider min="0" max="1" step="0.01" (input)="settingsService.audioTick.volume = $event.value" [value]="settingsService.audioTick.volume" />

为什么我无法将边框应用于角度垫表行？

我有一个简单的角材料表： 姓名 &... 我有一个简单的角材料表： <table mat-table [dataSource]="scoreboardData"> <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="totalScore"> <th mat-header-cell *matHeaderCellDef> Total Score </th> <td mat-cell *matCellDef="let element"> {{element.totalScore}}</td> </ng-container> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> </table> 我想在行之间添加一些额外的边距以及边框，甚至可能添加一些填充。我发现我可以更改行的背景颜色，但无法对行应用边距、填充或边框。 tr.mat-row { background: #2f5b98; /* Old browsers */ background: -moz-linear-gradient(top, rgba(74,144,239,1) 20%, rgba(0,0,0,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(74,144,239,1) 20%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(74,144,239,1) 20%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4a90ef', endColorstr='#000000',GradientType=0 ); /* IE6-9 */ margin-top: 16px; padding: 8px; border: 1px solid #FAFF00; } 我确信这很简单，但我无法弄清楚是什么阻止我将这些样式应用到该行。同样，我可以更改背景、其中的字体和其他几种样式，但不能更改这三种特定样式（填充、边距、边框）。 编辑：我已经确定任何 html 表格都不允许使用填充和边距。但边界仍然让我困惑。 您的样式问题与 Angular Material 表格无关，而与一般的 HTML 表格有关。如果您搜索如何设计 table 的样式，例如向行或边距添加边框，您会找到各种答案和建议。 您基本上无法直接将 margin 或 padding 添加到表格行 <tr>。 margin 适用于除 table-caption、table 和 inline-table 之外的表格显示类型的元素之外的所有元素。 padding 适用于除 table-row-group、table-header-group、table-footer-group、table-row、table-column-group 之外的所有元素 和表格列。 解决方案 如何为表格行设置 border 以及指定 margin 和 padding 取决于您使用的 border model（collapse 或 separate）。 分离边框模型：border-collapse: seperate 在分离边界模型中，边缘与 单元格的边界。 （因此，在这个模型中，可能存在间隙 行、列、行组或列组之间，对应 到“边框间距”属性。） 在此模型中，每个单元格都有单独的边框。这 'border-spacing' 属性指定边框之间的距离 的相邻单元格。 (...) 行、列、行组和列组 不能有边界（即用户代理必须忽略边界 这些元素的属性）。 1。解决方案：如果你想要border，margin和padding，你可以这样做： td.mat-cell { /* row padding */ padding: 16px 0; /* row border */ border-bottom: 1px solid #ffa600; border-top: 1px solid #ffa600; } td.mat-cell:first-child { /* row border */ border-left: 1px solid #ffa600; } td.mat-cell:last-child { /* row border */ border-right: 1px solid #ffa600; } table { /* row spacing / margin */ border-spacing: 0 8px !important; } https://stackblitz.com/edit/angular-cjxcgt-wtkfg4 折叠边框模型：border-collapse: collapse 行、列、行组、列组的边缘 折叠边界模型与假设的网格线一致 单元格的边界居中。 （因此，在这个模型中， 行一起完全覆盖桌子，不留任何间隙；同上 列。） 在折叠边框模型中，可以指定以下边框： 包围单元格、行、行组、列和列的全部或部分 团体。 (...)此外，在此模型中，表格没有填充（但有边距）。 2。解决方案：如果您只想要一行border和padding，但行之间没有间距/边距，您可以这样做： table { border-collapse: collapse; } th { /* row border */ border-bottom: 1px solid #ffa600; } td.mat-cell { /* row padding */ padding: 20px 0; border: none; } tr.mat-row { /* row border */ border: 1px solid #ffa600; } https://stackblitz.com/edit/angular-cjxcgt-xphbue mat-footer-row, mat-header-row, mat-row { border-bottom-width: 10px; } 尝试这个代码。这会起作用:) .mat-cell { padding: 16px 0; border-top: 1px solid rgb(97 82 82); border-right: 1px solid rgb(97 82 82); } .mat-cell:first-child { border-left: 1px solid rgb(97 82 82); } .mat-row:first-child { border-left: 1px solid rgb(97 82 82); } .mat-row:last-child { border-bottom: 1px solid rgb(97 82 82); } .mat-column { border-right: 1px solid rgb(97 82 82); } .mat-column:first-child { border-left: 1px solid rgb(97 82 82); } .mat-header-cell:first-child { border-left: 1px solid rgb(97 82 82); } .mat-header-cell { border-right: 1px solid rgb(97 82 82); border-top: 1px solid rgb(97 82 82); } table { border-spacing: 0 8px !important; } 最简单、更好的方法是利用有角材料的力量。 使用 mat-table、mat-header-cell、mat-cell 代替 table、th、td。最后使用 mat-header row 和 mat-row 而不是 th 和 td。然后你可以根据需要为每一行加边框。 实例：Stackblitz

尝试使用角度材料的下拉菜单测试组件时，角度 17 中出现“意外的合成属性 @transitionMessages 发现”错误

我的应用程序运行良好。当我尝试测试该组件时，出现标题中提到的错误。 导入我的组件 从 '@angular/core' 导入 { Component } ； 从 '@

我正在尝试安装角度材料，我给出了命令 npm install @angular/material @angular/cdk，我面临以下问题

npm 错误！代码 ERESOLVE npm 错误！ ERESOLVE 无法解决依赖性 树 npm 错误！ npm 错误！解决时：[email protected] npm ERR！ 发现：@angular/[email protected] npm 错误！ 节点_模块/@angu...

Angular Material Table：“无法绑定到‘dataSource’，因为它不是‘table’的已知属性”

我正在尝试从 Angular [email protected] 在我的 Angular 应用程序中添加一个表格（如此处所示）。 我复制/粘贴了 Angular Material 官方文档中的代码，但仍然收到错误： 不能...

导航栏和侧边栏以及路由的问题

我在角度第一个菜单第二个标题中创建了4个组件，第3个是主页，第4个是登录组件，在菜单组件中我使用material ui创建了sidbarnvbar，在登录组件中我有c...

Angular 材质选项卡 - 响应式选项卡更改

我在 mat-tab-group 中有两个选项卡： 我在 mat-tab-group 中有两个选项卡： <mat-tab-group animationDuration="0ms" [disablePagination]="false" mat-stretch-tabs="false" mat-align-tabs="start" > <mat-tab label="First tab"> <ng-template matTabContent> <app-first-tab /> </ng-template> </mat-tab> <mat-tab label="Second tab"> <ng-template matTabContent> <app-second-tab /> </ng-template> </mat-tab> </mat-tab-group> 在第一个选项卡上，我生成了很多组件，因此需要一些时间才能完全渲染。 当我选择第二个选项卡并返回第一个选项卡时，应用程序会冻结（几秒钟），直到所有内容都呈现出来。 是否可以显示例如。标题（它的更多-更少的静态），一些微调器，当所有内容都渲染时，隐藏微调器？或者让用户以某种方式知道发生了什么事？ 示例：https://stackblitz.com/edit/stackblitz-starters-sb2saw ..仅用于测试目的。 非常感谢。 您遇到的问题有两个部分： 您的异步请求的模拟实际上是使用同步函数（for循环），该函数在访问服务时正在运行。这不是标准 Observable 在野外的工作方式，也是选项卡之间漫长等待的根源。 您可以利用容器和模板在加载异步变量时显示加载微调器。 HTML 示例： <ng-container *ngIf="data$ | async as data; else loading"> <table> <thead> <th>ID</th> <th>Code</th> <th>Buttons</th> </thead> <tbody> <tr *ngFor="let item of data"> <td>{{ item.id }}</td> <td>{{ item.code }}</td> <td> @for (idx of buttonCount; track idx; let index = $index) { <button>{{ idx }}</button> } </td> </tr> </tbody> </table> </ng-container> <ng-template #loading><mat-spinner></mat-spinner></ng-template> 更新了服务以更好地模拟异步数据（也可以作为 Observable 共享）： async fetchData(): Promise<ApiModel[]> { let result: ApiModel[] = []; for (let i = 1; i <= this.cnt; i++) { result.push({ id: i, code: `item_${i}` }); } return new Promise((resolve, reject) => { setTimeout(() => resolve(result), Math.random() * 5000); }); } 结果是立即交换选项卡，在加载数据时显示一个微调器图标： StackBlitz 叉子链接

角度材质表中的嵌套列和行内容投影

我正在尝试创建一个可重用的带有投影列和行定义的角度材质表。 Angular 在他们的文档示例中提到了这一点。单层内容投影效果完美...

在使用 google 成功进行 oauth2 身份验证后，Spring Boot 后端将 401 发送到 Angular 前端

Spring Boot Rest api 在后面，Angular 在前面。 大家好，我在使用 google 成功进行 oauth2 身份验证后遇到了问题。 在 srping boot debug 中我可以读到以下内容： os.web.cors。

设置 Angular Material Tooltip 的字体大小

我对网络开发非常陌生，我不知道如何解决以下问题，尽管它可能很简单。 我正在使用 Angular 4 和 Angular Material 来实现这样的工具提示：...

Angular 在其自身范围内更新数据后不会更新 UI

我很确定我错过了一些东西。正如你在这里看到的，我只有一个订阅，而且在组件内部我使用 typeWriter 函数进行本地更改，但 UI 不会更新