Safari上的Flexbox布局在移动视图中不起作用
我正在使用 @angular/flex-layout和 @angular/材料用于我的网站,但是我在使用Safari时遇到了我的移动布局. 这只有在窗口足够小时才会发生,以实现MD或XS规则 在Chrome上看起来像这样: 但是在Safari上看起来像这样: 这是一个有代码的plunk: 解决方案 我发现了问题是什么. 我必须向未正确填充的父母添加flex: 1 0 auto !important;. 其他解决方案 如果您使用的是@angular/flex-layout尝试使用现有fxFlex选项而不是使用CSS来覆盖样式. 相同的CSS flex: 1 0 auto !important也可以通过fxFlex="noshrink" 来完成 github fxflex-api
0 2024-02-21
编程技术问答社区
将组件的大小限制在包含DIV的高度上
我有一个布局,该布局在顶部包含一个工具栏,左侧是一个sidenav,其余的为内容. Sidenav包含搜索框和项目列表.我期望的结果是,Sidenav的高度将是其所在行的大小,并且列表将在该高度内部溢出和滚动.但是我无法使内部滚动工作,因为内部组件的高度大于包含的DIV的高度,并且设置height: 100%不起作用. 这就是现在的外观: 您可以看到左侧的整个组件都溢出(我想在末尾删除外滚动),并且内部组件仅缩放到全尺寸,并且列表大小也不有限对于组件,由于它不限于包含DIV的高度. 这是HTML和CSS的: logs.component.html
0 2024-02-21
编程技术问答社区
如何在Material 2对话中把数据从一个组件发送到另一个组件上?
我正在使用材料2对话框,我能够在对话框上获取数据. ,但我找不到任何解决方案以@Input 在对话框上发送数据 import {Component} from '@angular/core'; import {MdDialog, MdDialogRef} from '@angular/material'; @Component({ selector: 'dialog-result-example', templateUrl: './dialog-result-example.html', }) export class DialogResultExample { selectedOption: string; constructor(public dialog: MdDialog) {} openDialog() { let dialogRef = this.dialog.open(DialogResultExampleDialog);
0 2024-02-21
编程技术问答社区
角度材料,选择矩阵列表选项并显示所选矩阵列表选项的相应数据。
当用户徘徊在表的第一列上时,会出现一个工具提示,该工具提示在底部有一个按钮. 单击按钮,Angular Mat-Dialog打开了Mat-Dialog左侧的第一列数据. 我需要实现2件事 1)在Mat-Dialog的左侧,默认情况下应根据悬停的行用户并单击其工具提示按钮. 2)MAT-DIAGOG的右侧需要用"条件","偏移","警报"属性数据填充与左侧选择的MAT-List-Option相关的属性数据. eg:在表格中,用户徘徊在1分钟的数据(警报列下下),并在工具提示打开后单击该按钮右侧其各自的"条件","偏移","警报"数据应加载,因此,根据所选的Mat-List-option的不同,其各自的"条件"数据应加载. 我一次只能选择一个垫子列表 alter-dialog.component.html
0 2024-02-21
编程技术问答社区
带有材料自动完成功能的Angular 5
我在自动完成材料中有一个问题ID,我想让您命名我,就像我通过ID一样,名字不断出现. 有某种方法可以做我说的传递HTML的ID参数,而不会从输入中消失的名称. 在 export class DetailproductcreateComponent implements OnInit { FormDetailProductCreate : FormGroup; myControl = new FormControl(); filteredProducts : Observable; filteredProviders : Observable; filteredTypeProducts : Observable; products : Product[]; providers : Provider[]; typeproducts :
0 2024-02-21
编程技术问答社区
Angular Material 2 matHorizontalStepper表单验证
我正在使用Angular材料的Mathorizo​​ntalstepper 5.2.4的Angular 4/5.线性模式已打开. 在步骤1上,我有一个表格,其中有两个输入. 但是步进检查是否仅填充一个所需的输入.足以使用户仅填写一个必需的字段,并让用户进入步骤2. 这是我在谈论如果填充所有必需的输入,我该设置什么以验证? 解决方案 我分配了您的Stackblitz应用程序并修复了您的错误. 您的错误是使用[stepControl],[formGroup]的相同控件,并且对formControlName的两个输入(firstName和lastName). 您需要创建父formgroup(示例中的firstFormGroup),然后在其中创建两个formcontrols(firstName和lastName).其余的只是在HTML中直接连接. 还注意到我从所有元素中删除了required.如果您使用的是模板驱动的表单,则无需放入HTML元素上.
0 2024-02-21
编程技术问答社区
Angular 9-如何在HTML页面中动态地添加一个垫子图标?
我有一个简单的问题"@angular/core": "~9.1.6",和"@angular/material": "^9.2.3",,我需要将随机done元素添加到HTML页面.我尝试将DomSanitizer与管道一起使用,但不起作用. 管道允许HTML标签: @Pipe({ name: 'booleanToIcon' }) export class BooleanToIconPipe implements PipeTransform { constructor(private domSanitizer: DomSanitizer) {} transform(value: string) { return this.domSanitizer.sanitize(SecurityContext.HTML, this.domSanitizer.bypassSecurityTrustHtml(va
0 2024-02-21
编程技术问答社区
让Angular材料表通过api调用正常工作
我试图获得角度材料表来与我的数据库进行API调用,我获得了正确的数据,我只想在新材料表中显示,并且由于某种原因,这无法正常工作. . 这是我的主要组件 import { Component } from '@angular/core'; import {AosService} from './app.aos.service.component' import {QuoteModel} from './QuoteModel' import {DataSource} from '@angular/cdk'; @Component({ selector: 'app-aos', providers: [AosService], templateUrl: './app.aos.quoteQuery.component.html', styleUrls: ['./app.aos.quoteQuery.component.scss'] }) export class A
0 2024-02-21
编程技术问答社区
扩展Angular组件(只有装饰器)
我正在尝试扩展角度组件以提供自定义CSS.我希望使用相同的组件,但只需更改CSS即可.如果它的主题,我可以更改属性,但是我想更改组件中的硬编码的样式.因此,我正在尝试扩展组件.这是我所做的. @Component({ selector: 'my-tab-nav-bar', styles: [``] // custom css here }) export class TabNavBarComponent extends MdTabNavBar { } 这将失败,因为未指定模板.因此,我也添加了模板.因此,我复制粘贴模板. @Component({ selector: 'my-tab-nav-bar', template: `
0 2024-02-21
编程技术问答社区
使用CSS在angular material 2元素中通过Id或Class锁定特定元素样式
我有一个带有材料按钮菜单的入口处. 当我尝试通过使用:: ng-deep来覆盖默认样式时,同样,同时组件中所有按钮组件的样式更改. ::ng-deep .mat-button{ max-width: 50px !important; min-width: 45px !important; height: 5em; } ::ng-deep .mat-button-ripple mat-ripple{ max-width: 40px !important; min-width: 20px !important; } 我还尝试使用类瞄准样式,但它不像通常的CSS那样工作. .actions ::ng-deep .mat-button{ max-width: 50px !important; min-width: 45px !important; height: 5em; }
0 2024-02-21
编程技术问答社区
在Angular页面外使用Angular材料类
我们正在重建我们的Web应用程序,并选择将Angular用作前端框架和Google材料作为主要风格概念,因为它简单而流行. 我们的大多数页面都将是Angular应用的一部分,但其中一些页面将不是.我们希望在应用程序的任何页面上使用相同的类/样式和主题,并避免代码重复. 主要问题是:如何在没有角度的页面上使用Angular Material工具包中的材料设计类?我们尚未找到完整的Angular Material CSS文档,仅将CSS链接与库一起附加到"静态"页面. . 谢谢! 解决方案 上没有文档 使用角材料类外部页面 因为角质材料不打算被用作样式/脚本"工具包".它是Angular应用程序框架平台的组件库.它是通过使用自定义组件,指令等而不是通过将类应用于标准HTML来实现的. 例如,没有以下角度创建角材料表单字段: ... 它是由: 创建的
0 2024-02-21
编程技术问答社区
矩阵选择的下拉位置没有对齐
我正在使用一些角材料组件,但是输入框出现了一些问题,然后选择选项元素. 选择选项不正确对齐.当我单击以查看选择选项列表时,它显示了我当前div之外或可以说页面的左侧,这是不正确的. ng -v Angular CLI: 1.7.4 Node: 8.11.1 OS: win32 x64 Angular: 5.2.11 ... animations, common, compiler, compiler-cli, core, forms ... http, language-service, platform-browser ... platform-browser-dynamic, router @angular/cdk: 5.2.5 @angular/cli: 1.7.4 @angular/material: 5.2.5 @angular-devkit/build-optimizer: 0.3.2 @angular-devkit/core: 0.3.2 @angular-d
0 2024-02-21
编程技术问答社区
如果为mat-tab-group设置了[backgroundColor]属性,那么子控件的波纹效果就会消失。
儿童控制损失连锁反应,如果设置了MAT-TAB组的属性,是否有任何解决方法.? 在查看问题 解决方案 连锁效应在起作用,但我们无法将其视为ripple color是白色.之所以采用白色,是因为您将背景色设置为主颜色,而您的主要颜色为蓝色,前景白色.涟漪会自动采用这种前景颜色. 您可以通过两种方法 解决它 如果您的backgroundColor设置为深色,则将颜色提供给matRippleColor属性,在您的情况下,它的主要和警告.
0 2024-02-21
编程技术问答社区
如何在选择下显示选项(Angular material 7)?
如何在选择(Angular Material 7)下显示选项? 默认选择之类的东西: 解决方案 "正确"的答案是在您的垫子选择上使用disableOptionCentering,但即使这也只能阻止占位符被覆盖,并且不会模仿基本的本地选择. 在Angular中对本地元素进行操纵是很皱眉,但不幸的是,我发现这样做的唯一方法... 希望有人会发布一种真正的"角度"方式 当我发现自己操纵这些材料库时的东西 原因类型. 您需要用DIV包装器包装您的选项并分配Templateref #matOptionDiv,以便您可以在组件中使用此选项来获取您选项下拉的父元素的proppt propt down,cdk Overlay
0 2024-02-21
编程技术问答社区
如何在angular2中使mat-select总是在表单字段下打开?
我需要Angular Material Mat-Select组件才能在其表单字段下方打开,但它可以在选定的选件位置上打开下拉列表,并且该容器根据所选选项将其移动到顶部. 有没有办法在表单字段下方打开下拉容器? 解决方案 该行为是通过材料设计规定的.您可以使用disableOptionCentering选项关闭所选选项的中心,但这在不低于该选项的字段上放置了顶部选项.您可以通过指定panelClass选项并设置display和position属性来覆盖使用CSS,但是如果窗口空间阻止该面板在标准位置打开时,这将无法正常工作. .
0 2024-02-21
编程技术问答社区
用Mat-Tabs阻挡垂直滚动的HammerJS刷屏
因此,我在Angular应用程序中有一个组件,该组件具有针对数据类别的数据类别的选项卡.我想使用Hammerjs在标签之间滑动以获得更具本地的体验.我还安装了此虚拟滚动软件包: -scroll 处理我为每个mat-tab下的列表做准备的项目数量.我将首先在此处显示数据和标记: 这里正在构建dummydata只是为了显示其结构的结构: dummyData: any[] = []; selectedTab: number; constructor() { this.selectedTab = 0; for (let i = 0; i
0 2024-02-21
编程技术问答社区
反转mat-checkbox的 "选中 "值
当角质材料mat-checkbox(/复选框/概述)已检查其具有" true"的值.未选中时,它具有" false"的值. 有没有办法扭转这种行为?我只需要相反.检查的复选框应序列化为" false",而未选中的复选框应在调用this.filterFormGroup.getRawValue()>. 时序列化为" true" 我希望有这样的东西: 或我需要创建一个自定义指令: 我的目标是此代码: this.filterGroup = new FormGroup({ resolved: new FormControl(), }); thi
0 2024-02-21
编程技术问答社区