标签: angular-material
如何在angular-material中实现ng-class到md-chip
这里是我的问题-我不能落实ng-class='{activeTag: $chip.active}'到<md-chip></md-chip>。我已经尝试将此指令添加到，<md-chips></md-chips>但它不起作用（因为$chip不在当前范围内）。我也可以将它添加ng-class到md-chip-template但从视觉上看这不是我想要的，我需要标签中的所有内容的背光。顺便说一句，<md-chip></md-chip>在md-chips指令中动态创建。也许有人面临这个问题，或者只是知道解决方案。谢谢。
这是我的控制器
controller('ChipsController', function($scope) {
$scope.tags = [
{
id: 1,
name: 'Pop',
active: false
},
{
id: 2,
name: 'Rock',
active: true
},
{
id: 3,
name: 'Reggie',
active: false
}
];
});
我的看法
<md-chips class="custom-chips selected" ng-model="tags" readonly="true">
<md-chip-template ng-class="{'activeTag': $chip.active}" style="cursor: pointer;">
<a ui-sref="">
<strong>{{$chip.id}}</strong>
<em>({{$chip.name}})</em>
</a>
</md-chip-template>
我的CSS
.activeTag {
background: rgba(85, 107, 47, 0.66) !important;
color: white !important; …推荐指数
解决办法
查看次数
Angular Material md-toolbar/md-content 双滚动条
我的网站创建两个滚动条时遇到问题。我正在使用 md-toolbar 作为我的导航（我想一直保持在顶部）和 md-content 来保存我的内容。当我滚动时，导航保持在顶部，但会创建一个额外的滚动条。（见图片右侧有两个滚动条）
这是我的 index.html：
<body ng-cloak ng-app="TrooNews" ng-controller="AppController as app">
<!--top toolbar-->
<md-toolbar class="md-shadow-bottom-z-1">
<div class="md-toolbar-tools">
<md-button class="md-icon-button" ng-click="app.toggleSidenav('left')" hide-gt-md1 aria-label="Menu">
<md-icon>menu</md-icon>
</md-button>
<a href="/home"><h1>Troo News</h1></a>
<span flex></span>
<md-button class="md-icon-button" ng-click="" hide-gt-md1 aria-label="Search">
<md-icon>search</md-icon>
</md-button>
</div>
</md-toolbar>
<!--left sidenav-->
<div layout="row" layout-fill flex>
<md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="left">
<md-toolbar></md-toolbar>
<md-content flex role="navigation">
<md-list>
<md-list-item ng-repeat="item in app.menu" ng-click="app.navigateTo(item.link)">
<md-icon>{{item.icon}}</md-icon>
<p>{{item.title}}</p>
</md-list-item>
</md-list>
</md-content>
</md-sidenav>
<div layout="column" layout-fill ng-viewport></div>
</div>
<div ng-view class="content"></div>
</body>
我的卡片视图的 html：
<md-content class="container-fluid"> …推荐指数
解决办法
查看次数
角度6.7如何将默认主题颜色应用于mat-sidenav背景？
我希望背景与主题颜色mat-sidenav相同mat-toolbar。
在src\styles.scss我有：
@import '~@angular/material/prebuilt-themes/indigo-pink.css';
我的模板/ HTML文件具有：
<mat-toolbar color="primary">
<button mat-icon-button (click)="sidenav.toggle()">
<mat-icon>menu</mat-icon>
</button>
Title text
</mat-toolbar>
这很好地显示为带有menu图标和的靛蓝菜单栏Title text。在下面，我想要一个mat-sidenav（将具有菜单项），并且我希望该mat-sidenav区域的整个背景具有与该颜色相同的颜色：
<mat-toolbar color="primary">
这是靛蓝-由主题定义。
HTML代码继续进行渲染mat-sidenav：
<mat-sidenav-container>
<mat-sidenav #sidenav mode="side" opened>
<app-vertical-menu></app-vertical-menu> // renders the menu items
</mat-sidenav>
<mat-sidenav-content>
<div class="app-main-area">
<router-outlet></router-outlet>
</div>
</mat-sidenav-content>
</mat-sidenav-container>
的mat-sidenav背景和颜色都被应用的主题，不变和它的背景颜色是空白。
我知道我可以mat-sidenav使用模板中的类名在组件内设置背景样式-例如：
...
<mat-sidenav #sidenav2 mode="side" opened class="vertical-menu">
...
并在style / scss文件中：
.vertical-menu {
background-color: navy !important;
}
但是相反，我想应用默认主题的主题颜色（例如：） …
推荐指数
解决办法
查看次数
故障排除无法在垫式按钮Angular 7上加载材质样式吗？
我使用创建了一个应用，ng new并使用添加了Material ng add @angular/material。当我运行时，ng serve尽管有我的参与，但我看不到加载了style.css材料angular.json
"architect": {
"build": {
"options": {
"styles": [
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.scss"
],
...
我还想念什么？当我查看chrome开发者控制台时，看到它正在加载
content_scripts.cssfrontend.cssshadow.css
字体（fonts?family..）的一个css 和图标的一个的cssicon?family..
我也尝试过添加styles.scss以下内容，
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
这也导致没有引入其他css文件。
推荐指数
解决办法
查看次数
如何在Angular Material中将Tab键作为Enter键？
这是我的角物料自动完成代码
<input type="search" id="setId" name="setId" [attr.list]='collectionType' [(ngModel)]="selValue" class="text-box"
placeholder="--Select--" (focus)="ValidateParent()" (keyup.tab)="test()" (keyup)="EmitValues($event)" [id]="setId"
[matAutocomplete]="auto" [title]="selValue" [placeholder]='WaterMarkText'>
<div [hidden]="IsCascading">
<mat-autocomplete [id]="collectionType" #auto="matAutocomplete" (optionSelected)='onChange($event)'>
<mat-option *ngFor="let items of codeList" [value]="items.text" [attr.data-text]='items.text' [id]="items.value">
{{items.text}}
</mat-option>
</mat-autocomplete>
</div>
角度材料的tab选择存在问题。例如，自动材料完成无法在单击tab按钮时选择值。但点击enter按钮即可正常工作。因此，我需要手动enter为tab键事件覆盖键事件。怎么可能？
推荐指数
解决办法
查看次数
角材料的迷你按钮周围显示一些正方形
我将我的Angular 7项目用于Angular材质的迷你按钮，我遇到了一个问题，我添加了angular迷你按钮，它的正常工作，但是当我单击显示方形的按钮时，有人知道如何解决该问题吗？
谢谢。
请看看我的问题
我的密码
component.html
<div class="p-2">
<button mat-mini-fab>
<mat-icon aria-label="Example icon-button with a heart icon " >edit
</mat-icon>
</button>
</div>
<div class="p-2"><button mat-mini-fab>
<mat-icon aria-label="Example icon-button with a heart icon">delete
</mat-icon>
</button>
</div>
.css
.mat-mini-fab.mat-accent {
background-color: #e9ecef; color: black; box-shadow: none;
}
推荐指数
解决办法
查看次数
为什么在此FormArray中无法编辑mat-form-field？
下面的表格几乎可以完成它应该做的事情，除了我无法编辑其中的任何mat-form-field内容。它们没有被禁用，只是无法编辑。
是什么原因呢？
请参阅：StackBlitz
我在StackBlitz上看不到这个示例的不同之 处。
import {Component} from '@angular/core';
import {FormBuilder, FormGroup, FormArray, FormControl} from '@angular/forms';
@Component({
selector: 'form-field-label-example',
templateUrl: 'form-field-label-example.html',
styleUrls: ['form-field-label-example.css'],
})
export class FormFieldLabelExample {
public dataList = [
{name: 'Alice'},
{name: 'Bob'}
]
public form: FormGroup;
constructor(private _fb: FormBuilder) {
const formArray = this._fb.array([]);
for (const data of this.dataList) {
formArray.push(
this._fb.group({name: new FormControl(data.name)})
);
}
this.form = this._fb.group({
offers: formArray
});
}
}
<div>
<form [formGroup]="form">
<div formArrayName="offers" *ngFor="let data …推荐指数
解决办法
查看次数
ngStyle指令的角度设置样式
我在这里使用Angular 7。我想渲染一个*ngFor循环内的图像。所有这些图像的高度都不同，因此我想根据返回的数据设置图像的高度。这是参考代码
<div *ngFor="let image of images" class="image-container">
<img mat-card-image src="{{image.webformatURL}}">
<p>image height:{{ image.previewHeight }}</p>
</div>
在上面的示例中，我以像素为单位获取了{{ image.previewHeight }}要<img>标记的高度。寻找与此相似的解决方案
<img mat-card-image style="height:{{ image.previewHeight }}" src="{{image.webformatURL}}">
我已经尝试过了，但是在页面上给出了错误。
推荐指数
解决办法
查看次数
自定义Angular 6的Angular Material Datepicker大小
我想在Angular 6中重置Angular Material datepicker的宽度和高度。
我已经检查了chrome中的datepicker元素的类，并如下使用
.mat-datepicker-content .mat-calendar{
width: unset !important;
height: unset !important;
}
当我更改chrome中的属性时，它会反映在UI中，但是当我将其添加到代码中时，它不会应用于DatePicker。
我已经在Angular Material Model Component中使用了Datepicker。
请帮忙。
推荐指数
解决办法
查看次数
如何使用复选框锁定按钮？
我有一个复选框，最初应该是不活动的。并且还有一个按钮应该是不活动的。如果复选框处于活动状态，则该按钮也将处于活动状态。反之亦然。
ts：
disabled: boolean = false;
changeEvent(event) {
if (event.target.checked) {
this.disabled = true;
}
else {
this.disabled = false;
}
}
的HTML：
<mat-checkbox color="primary" (change)="changeEvent($event)">
Disabled
</mat-checkbox>
<button mat-button color="primary" [disabled]="!disabled">Click</button>
推荐指数
解决办法
查看次数
标签 统计
angular-material ×10
angular ×8
css ×4
angularjs ×2
html ×2
javascript ×2
angular7 ×1
autocomplete ×1
datepicker ×1
events ×1
md-chip ×1
typescript ×1