我想使md列表项中的文本可选择。但是,我发现当为元素设置ng click时,整行变成一个按钮,使用户无法选择元素上的任何文本。关于如何覆盖此功能,有什么想法吗
代码如下:
这会很难看的。当ng click出现时,它会在每行顶部生成一个按钮,并向每个字段添加“用户选择:无”。这就是为什么它是不可选择的
如果确实想使其可选择,可以在字段上设置z-index使其位于前面,并设置user select:text使其可选择。此外,最好使用span而不是div,因为span具有动态宽度
像这样的东西应该有
我正在md对话框中使用md选项卡。它在Chrome中运行良好,但在firefox中会产生问题。我的密码是
<md-dialog aria-label="Mango (Fruit)">
<form>
<md-toolbar>
<div class="md-toolbar-tools">
<h2>Join Us</h2>
<span flex></span>
</div>
在尝试使用Autocomplete进行内联编辑时,我遇到了一些问题
为相同的对象创建了plunk:
自动完成选项未出现在预期位置。我必须向下滚动网格底部以查看选项
一旦我选择了任何选项,我就无法在行中看到更新的值-我只看到空白值
尝试为isPopup?():布尔值{return false;}为#1和getValue(){return this.selectedValue;}为#2提供各种值,但没有得到任何关于实际问题的线索
我想要的是
在适当的位置显示的选项-就像我们在使用“正常材质自动完成”
我正在使用ng template matTabContent和一个Material选项卡延迟加载一些内容:
<mat-tab label="First">
<ng-template matTabContent>
Content 1 - Loaded: {{getTimeLoaded(1) | date:'medium'}}
...
</ng-template>
</mat-tab>
内容1-加载:
我有一个动态的标签内容,从一个标签移动到另一个标签,标签内容变得闪烁
<md-tabs md-dynamic-height class="md-primary">
<md-tab data-ui-sref="common.usermanagement.userclassmaintenance" md-active="$state.includes('common.usermanagement.userclassmaintenance')">
我正在用Angular 4(带材质)和Laravel 5.4构建一个应用程序。
在登录表单中,我有两个输入文本,登录名和密码。
角度验证器工作正常,但是,当用户提交表单时,我无法显示材料输入中错误的回调。(它在后端(laravel 5.4)中检查表单的规则,例如:min lenght)并返回一个我在Angular中处理的http代码422。
我尝试将value()修补到:
例如,添加要在前端显示的错误对象,但这是不可能的
简而言之,我需要添加一个自定义错误以显示在材质输入错误中
login.ts
我有下面的菜单
<button mat-button [matMenuTriggerFor]="menu" style="display:none;">Menu</button>
<mat-menu #menu="matMenu">
<button mat-menu-item *ngFor="let item of items" (click)="select(item)">
{{ item }}
从Api端partTime value=(1,0),我将如何设置checked为1,unchecked为0。如果您将ngModel的绑定更改为schedule.partTime,您可以控制列表workscheduleTableData中每个条目的partTime属性
<table>
<tr *ngFor="let schedule of this.workScheduleTableData; let i = index">
<td><mat-
我有一个项目列表,从中拖动一个项目并将其放到另一个列表中。我正在从Angular中使用copyArrayItem()方法,以不从上一个数组中删除该项
当我开始拖动时,该项位于前一个数组中:该项中的占位符将显示
开始拖动,将显示占位符
我将离开上一个数组:占位符/拖动项消失(我希望占位符/拖动项保持不变)->开始数组有负1个项
占位符消失,我不想要的
我在目标数组上:一个占位符出现在目标数组中
我正在删除该项:该项现在显示在“开始”和“目标”数组中。经过进一步研究,我发现了一个关于该问题的未决
我有两个JSON。第一个是JSON值的格式,第二个是我想要在UI中显示的实际值
但我看到的是“application.appID”,而不是101。请问有什么帮助吗
如果标签为“application.appID”,则不起作用。我有一个标签:“字符串”
工作条件标签:application.appID
组件技术
this.json1={
label:"applicaiton.appID"
};
this.application ={
appID:101
};
ui.htm
如果选中了其他复选框,我需要禁用Z复选框。如果选中了Z复选框,我还需要禁用所有其他复选框
如何实现这一点?您需要响应每个复选框的更改事件,并相应地启用或禁用复选框表单控件:
<div>
<mat-checkbox formControlName="A">A</mat-checkbox>
<mat-checkbox formControlName="B">B</mat-checkbox>
<mat-checkbox fo
我试图在选择框的聚焦后更改其占位符颜色和背景色,但颜色或背景没有更改。它是用相同的原色蓝色固定的
<mat-form-field floatLabel="never">
<mat-select placeholder="Select Function">
<mat-option *ngFor="let option of functionOptions" [value]="option.name">
我有下面的html,但这使按钮的大小越来越大。如何使按钮不增加高度
<div fxLayout="row">
<h5>User Management</h5>
<span fxFlex></span>
<button mat-raised-button color="primary">Create</button>
</div>
用户管理
创造
使用fxLayou
我有一张垫子桌子,在那里我需要拿到第二排、第三排等等。
当我这样做时:
cy.get('mat-table').find('mat-row').eq(1)
cy.get('mat-table').find('mat-row').eq(2)
它将找到第一行。
然而,当我这样做时:
cy.get('mat-table').find('mat-row').eq(1)
cy.get('mat-table').find('mat-row').eq(2)
它找不到第二排
有什么想法吗
谢谢试试这个:
在我的项目中安装了material flex layout,但我无法在@node_模块中看到该文件,并且无法正确地为flex layout css呈现该文件
下面是我遵循的代码,请建议这里缺少的任何东西
已安装
npm install @angular/flex-layout@latest --save
导入的应用程序组件.ts
import { ObservableMedia } from '@angular/flex-layout';
import { FlexLayoutModule
我在mat选项卡中使用时有一个表,可扩展行在切换选项卡上被扩展
以下是
可能存在的副本也有一个打开的。解决方法可以在重复URL和github URL中找到。
如何在md自动完成中传递默认值
图1:HTML代码
图2:JS代码
图3:输出
正如你所看到的,我没有得到任何默认国家作为输出。有办法吗
为搜索文本指定默认值并选择编辑对象
$scope.local ={
...
searchText : 'Default Value',
selectedItem : 'Default object'
...
}
我用超时来做这个
$timeout(function() {
$scope.local =
我用的是有棱角的材料。一旦我开始在表单字段中键入内容,我就看不到我的占位符标签(应该移到顶部)
这是我的密码:
package.json:
"dependencies": {
"@angular/animations": "^5.2.11",
"@angular/cdk": "^5.0.0",
"@angular/common": "^5.2.0",
"@angular/compiler": "^5.2.0",
"@angular/core": "^5
我使用的是角材料组件。在mat card actions组件中,我想将align=end设置为默认值,这样我就不需要在所有表单中添加它
实现这一目标的最佳方式是什么?我正在考虑扩展该组件,但我希望有一个更简单的解决方案。您可以通过css中的简单样式来实现。看:
在全局样式或其他一些样式中定义此样式:
mat-card-actions {
display: flex;
justify-content: flex-end;
}
p.S.这与使用align=“end”相同,但您是通过CSS
我似乎无法覆盖默认设置,使复选框相对于复选框标签垂直对齐。搜索了一段时间,但没有任何效果。请参见示例图像:
应该是:
已尝试以下方法:
.mat-checkbox-inner-container {
margin: none;
}
HTML:
Home类型
整个地方有一个属于你自己的地方
私人房间拥有自己的房间并共享一些公共空间
共享空间像公共空间一样,呆在共享空间中
有一种与ng材料无关的快速解决方案
您可以将“mat复选框”放入“li”元素,并通过如下设置列数来对齐“ul”:
我是这个网站的新手,也是个新手。我正在尝试合并/连接两个插值。可能吗?下面是我的代码:
<mat-grid-tile>
<mat-form-field *ngIf="item.controls.type.value=='DropDown'">
<mat-select formControlName="label" placeholder="label">
嘿,编码员们
我正试图找到一个优雅的解决方案,以主题化我们的角度应用。。。但在构建时。针对不同客户的不同构建
有人知道怎么做吗?理想情况下,我们不希望使用Angular CLI的environment.ts功能,因为这需要为所有客户环境的dev/qa/prod制作副本
另一个陷阱是。。。我们使用有棱角的材料
基本上
角度应用程序如何在构建时跨组件和主题角度材质具有全局颜色?即使是运行时,我想也是一个不错的退路。
运行时自定义
CSS变量var(-main bg color)在主题中,但它不适用
app.component.html
{{option.name}
应用程序组件.ts
1. import { SortPipe } from "../../../pipes/sort.pipe";
2. private sortPipe: SortPipe,
1. import { SortPipe } from '../../pipes/sort.pipe';
2.@NgModule({
declarations: [
SortPipe
]
我已经问过一些有经验的开发人员,他们基本上告诉我,如果不使用许多if-then-else语句,这是不可能的。这是我的硬编码示例,它可以工作,但我在寻找更高效、更优雅的东西。共有10个问题,如果我回答了所有问题,但决定返回并更改问题#5例如,我想删除该问题之后所有问题的答案,不管你在哪个问题上,基本上如果你在任何问题上倒退,则删除之后的所有内容。从角度来看,这比你想象的要困难。这是当前工作的硬编码:
clearAllQuestions() {
if (this.q1 == 'N
我正在使用Angular Material框架开发一个纯材料设计应用程序
但是,我不知道如何设置容器的背景颜色(例如,蓝色背景的登录表单)。
我当然可以用CSS来做,但我想知道是否有一个内置的指令/主题选项来做这件事。我很肯定我在文档中的某个地方看到过,但我现在找不到它。你必须做两件不同的事情:
设置.backgroundPalette('indigo')的方式与设置主主题的方式相同
创建容器
我已经检查了0.8.1版本的angular material,它工作正常
如果您还有其他问题,请随时提
我正在使用angular-material.sass编译app.css,但它不起作用。
其原因是JSPM创建的标签。
角材料在包装中有以下几行:
"shim": {
"angular-material": {
"deps": [
"./angular-material.css!"
]
}
}
它使JSPM在my app.css之后创建标记,许多覆盖都不起作用。
每次Angular Material版本更新我都必须转到Angular-Material.js并删
当我试图编译我的代码时,我得到以下错误
ERROR in MatTooltipModule is not an NgModule
我的应用程序模块导入如下所示
import {MatSliderModule, MatTooltipModule} from '@angular/material';
imports: [
MatTooltipModule,
MatSliderModule,
],
为什么会出现此错误?请尝试以下操作:
import {M
我正在尝试注册自定义SVG图标以用作材质图标,特别是国旗
在Angular中,我将使用MatIconRegistry.addSvgIcon。。与消毒剂一起使用
在AngularDart中,我找到了DomSanitationService,但到目前为止,我还无法找到MatIconRegistry的等价物 如果您想在此处覆盖角度组件中的任何材质图标,我们将使用混合:
如果您只是单独使用图标,而它没有覆盖已经包含的图标。我建议只在材质图标之外使用SVG本身
我一直在尝试实现一个解决方案,使用在web上找到的线程自动更新我的表,但没有成功。我对表单和表使用单独的组件,数据来自从API获取数据的服务。删除按钮是从列表组件内部运行的唯一操作,因此我认为我们可以从那里开始
服务内容如下:
postRecordDetail() {
const httpOptions = {
headers: new HttpHeaders({'Content-Type': 'application/json'})
}
return thi
如何使用角材质布局设计布局,如:
我举了一个例子
描述:一个md内容框,下拉阴影悬停在md工具栏上。我不认为您可以在纯角度材质中执行此操作,但您可以在材质中执行此操作,然后添加一个简单的css类。假设您拥有所有必需的脚本和css依赖项,您的html将如下所示:
<body ng-app="materialDesignApp" ng-controller="MainCtrl" layout="column">
<md-toolbar flex="33">
这是我要设置自定义水平尺寸的日期选择器:
不确定这是否是您的意思,但要设置日期选择器输入的水平大小,您可以覆盖css类,如下所示
.md-datepicker-input-container {
width: 300px;
}
不确定这是否是您的意思,但要设置日期选择器输入的水平大小,您可以覆盖css类,如下所示
.md-datepicker-input-container {
width: 300px;
}
这适用于我的角度材质6
.mat-datepicker-conte
我使用的是角材质2,但我认为这也适用于角材质1
假设我想使用“angular material”选项卡,但我想隐藏这些选项卡或向其添加一些特定的样式
因此,我有以下html/angular材质代码:
<md-tab-group>
<md-tab>
<template md-tab-label> <--- I want to style or hide all these. e.g. "height: 0"
是否有一种方法可以使用Md select for Angle material来显示选中了多少复选框,而不是显示所有选定的值。例如,如果我有4种选择:意大利香肠、奶酪、香肠和蔬菜,我选择其中三种。我如何显示“3个选定项”,而不是写出整个选定项 你的意思是这样的吗?-
加价
<div ng-controller="SelectOptGroupController as vm" class="md-padding" ng-cloak="" ng-app="MyApp">
<d
我已经为响应消息创建了烤面包机(snackbar)。
我想在toaster(snackbar)上添加一个html内容,以便以适当的格式显示多条消息
我已经试过了
var test ='<html> <body>' + '<h1>The Header</h1>' + '<p>The paragraph of text</p>' + '</body> </html>';
this._toastr
我们有一个带有材质的角度项目,我们在覆盖样式方面遇到了一些问题
例如,如果我们想在上全局更改边界半径,我们当前需要在样式中添加重要:
.mat-card { border-radius: $some-var !important; }
在我看来,这似乎是由于在我们自己的自定义样式之后加载材质样式造成的。至少根据“传统”CSS标准。所以通常你可以改变加载顺序,最后加载的样式会覆盖之前加载的样式
有没有办法做到这一点?或者,在不添加的情况下,我们应该如何设计这些类型的元素呢!重要信息所有这些?你不
可视切换按钮,并在需要时关闭它
我做了几次尝试,都失败了
我上传了今天的图片,但它没有切换,只有在较低的分辨率
你知道怎么做吗
请查看此代码段。基本上,您可以使用$mdSidenav(“sidenavId”).toggle()切换sidenav
angular.module('materialApp',['ngMaterial','ngAnimate']))
.controller('homeCtrl',['$scope','$mdSidenav',函数($scope,$mdSidenav){
我是一个非常新的角度材料,从官方网站的例子有点混乱。关于angular,我的理解是,它不是基于网格的,而是使用核心css flex box概念。因此,我想知道使用角度材料的目的是否与其他响应框架一样。我刚刚开始使用材料框架,到目前为止,它是爱/恨。IMO它是一个响应性很强的框架,类似于bootstrap,更适合移动应用。到目前为止,缺点是更难定制。这是我问过的一个问题,以材料为例 Angular Material与Twitter引导不同,Angular Material上的布局设计基于flex大
Angle Material文档提供了一个很好的示例,说明了如何将选择添加到表()。他们甚至提供了一个实验平台
我在中发现,第一个参数是是否可以进行多个选择(真)或不(假)。第二个参数是初始选定值的数组
在演示中,它们没有任何初始选择的值,因此它们的构造函数(第36行)中的第二个参数是空数组([])
我想更改它,以便有一个初始选择的值,因此我将第36行更改为:
selection = new SelectionModel<PeriodicElement>(true, [{positi
我正在我的应用程序中使用角度材质日期选择器。我需要更改某些特定日期的颜色。为此,我使用mat-DATECIPKER的“dateClass”属性。但它不起作用
html
<mat-datepicker [dateClass]="dateClass" #picker1 ></mat-datepicker>
错误
Can't bind to 'dateClass' since it isn't a known property of 'mat-datepicker'
我已经创建了一个网站,使用导航栏的角度材质示意图,在响应模式下会打开一个侧栏。我注意到,当在本地dev服务器上运行并使用Chrome模拟手机时,它显示了预期的sidenav。现在我已经部署到UAT,可以从手机上浏览,sidenav并不像我期望的那样显示
奇怪的是,当使用Chrome模拟手机时,当切换手机时,手机会发生变化,但当我重新加载页面时,侧导航无法显示
这是我的navbar.component.html
<mat-sidenav-container class="sidenav-co
侧导航打开时如何显示侧导航切换图标侧导航切换图标仅在屏幕较小时显示。当前侧导航被打开,当我关闭侧导航时,侧导航切换图标消失在中等宽度的屏幕上
我添加了图标,但它不工作
<mat-sidenav-container class="sidenav-container">
<mat-sidenav #drawer class="sidenav" fixedInViewport
[attr.role]="(isHandset$ | async) ? 'dialog' :
我在我的项目中使用了角度材质图标,它为用户数据实现了一个类似电子表格的界面
不幸的是,MatIcon似乎没有为行或列插入/删除提供任何合适的图标(我不得不说,这似乎是一个奇怪的疏忽,因为有一个“聚合物”和“船方向”的图标。)
是否有其他库可以使用指令
我有一个网站,是使用角材料。我喜欢元素,除了默认的字体大小和元素都是巨大的。要以可接受的比例查看网站,我或我的用户必须在桌面上缩小至少75%,并且我的大多数用户都是桌面用户。有没有办法在angular material中指定使用较小的字体、元素等?在尝试任何操作之前,请确保按照以下步骤使用正确的字体和字体大小
字体大小可以通过调整。更改图元的大小在技术上是可能的,但要做到这一点,您需要覆盖每个角度材质组件的样式-因此这是非常不切实际的
此外,组件大小和字体大小由材料设计规范决定,因此更改内容意味
我使用的是angular 6材质选项卡组件,我发现选项卡内容加载缓慢。
有没有什么方法可以让它成为渴望的负载而不是懒惰的负载?
原因是我需要使用第三方插件,但如果是延迟加载,则内容为空,并且实际维度无法准确检测。因此,第三方无法准确显示。
我记得这是可配置的,但找不到方法
比如:
<mat-tab-group [lazy]=false >
<mat-tab label="xxx">
content
</mat-tab>
内容
目前,我们有一个angular 8项目,其中有几个模块,我们使用惰性加载。当我们做prod时,我们遇到了这个问题
luis@luis-System-Product-Name:~/git/front/skymed-front$ ng build --prod
浏览器列表:caniuse lite已过时。请运行下一个命令npm update
chunk{0}runtime-es2015.53c55c0aec2cb05ea7ba.js(运行时)1.45 kB[输入][呈现]
chunk{1}main
在这个官方文档的示例中,我看到当您关闭matdialog时返回的值如下
<button mat-button [mat-dialog-close]="data.animal" cdkFocusInitial>Ok</button>
}
如何在将值返回到打开matdialog的组件之前调用该函数
谢谢解决方案非常简单
<button mat-button (click)="getData()" [mat-dialog-cl
我试着用棱角的形式使用棱角材料,但不知道如何使用。文件不是很清楚。我在尝试使表单布局响应时遇到问题。当我尝试在一行上使用不同类型(输入、选择、日期选择器等)时,布局会中断。@Etherealm这将对您有所帮助。
因此,Material Design 2组件就在那里,等待在你的应用程序中使用,但我的问题是,你将如何构建它们所在的布局?
你用什么?
手动编写布局?
使用CSS网格、Flexbox或两者
这是一款全新的web应用程序,我更喜欢使用现代技术来编写它,这些技术在这里可以持续使用(尽可能多地使用web技术…。您应该使用Angular的Flex布局。对于角材料,文档中也有规定:
布局->参见
是的,我见过。然而,它可以说Flexbox并不是整个布局的最佳工具,而更适合内部较小的部分。CSS网格被认为是
我刚刚开始在我的Angular应用程序中使用Angular Material主题
我使用了一些单选按钮,但我想设计它们的样式,使它们比平常小。我可以设置文本标签的样式,但我很难设置实际按钮本身(圆圈)的样式
所以现在,我有
<mat-radio-group class="smallRadio">
<mat-radio-button value="1">Option 1</mat-radio-button>
<mat-radio-butto
复选框的HTML格式:
具有更新功能的ts文件:
更新(){
this.selected=this.n.filter(n1=>n1.isSelected==true)
让selectedds=this.selected.map(x=>x.id)
此.\u nService.updateService(选择EDIDS)
。然后(resp=>{
}
if (resp) {
for(var i = 0;i<this.n.length;i++){
if(se
1 2 3 4 5 6 ...
下一页 最后一页 共 14 页