关于关闭对话框.https://material.angular.io/components/component/dialog afterClosed
不可用吗?
与官方主要文件一样:
Property 'then' does not exist on type '() => Observable<any>'. [default] Checking finished with 1 errors
我试过订阅,但也没办法.
我写了一个'popping'消息(android toast like)组件.所有其他组件都将其作为兄弟,并通过共享服务访问它.现在我想从实用程序函数中使用它,就像这样:
export function handleError(errorResp: Response | any): Observable<string> {
....
// here I would like to display the message
return Observable.throw(errMsg);
}
Run Code Online (Sandbox Code Playgroud)
我以为我可以将消息服务作为参数传递给handleError,但我觉得它不是DRY,因为我需要从每个组件事件中创建它,尽管组件不需要它用于其他目的.你能给我一些指导吗?
我在角度应用中使用angular2-toaster
这很简单,
您在组件的模板中定义烤箱容器
<toaster-container></toaster-container>
Run Code Online (Sandbox Code Playgroud)
并且您使用类型的toasterService ToasterService
来弹出烤面包机
this.toasterService.pop('success', 'Args Title', 'Args Body');
Run Code Online (Sandbox Code Playgroud)
但是这种方法存在问题,我不想在我想要弹出烤面包机的每个组件中定义一个容器,我想在root组件中定义一次.应用程序引导程序,但当我这样做,我得到错误
No Toaster Containers have been initialized to receive toasts.
Run Code Online (Sandbox Code Playgroud)
任何解决方案
问题:
我想在甜蜜警报上单击"确定"后将用户重定向到另一个页面,但是在我出于某种原因打开另一个甜蜜警报之前,用户不会被重定向.
您可以在代码上断点,但页面上没有任何反应.
问题的简单例子:http://jsfiddle.net/ADukg/14306/
注意:包括0秒超时"解决问题"
重现:
1)注意箭头后面的文字.. $ scope.name ="original",你可以看到它显示在页面上.
2)单击"单击第一个"按钮.这运行函数$ scope.changeMe(),它将$ scope.name更新为"delayed ......."
3)到现在为止,按钮上方的文本应该已经更改.但是直到你打开另一个甜蜜的警报,文本才真正改变
4)点击"然后在这里"或"点击第一个"按钮,弹出另一个甜蜜警报,DOM将最终改变.
我很确定这与AngularJS有某种关系,必须使用1.4.3.
有任何想法吗?
HTML:
<div ng-controller="MyCtrl">
<div>
<button ng-click="changeMe()">click first</button>
<button ng-click="decoy()">then here</button>
</div>
<div>
<button ng-click="reset()">reset text</button>
<div>
</div>
Run Code Online (Sandbox Code Playgroud)
JS:
var myApp = angular.module('myApp',[]);
myApp.controller("MyCtrl", function($scope, $timeout) {
$scope.name = 'original';
$scope.copy = angular.copy($scope.name);
$scope.changeMe = function() {
swal("Text should change now")
// runs on hitting "OK"
.then(function() {
// UNCOMMENT THIS and re-run the fiddle to show expected behavior …
Run Code Online (Sandbox Code Playgroud) 如何更改mat-icon-button大小?我的图标现在有24px,我想将该值增加到48px.我使用mat-icon作为按钮内容.我还注意到mat-icon-button刚刚硬编码40px/40px大小.
<button mat-icon-button color="primary">
<mat-icon class="material-icons">play_circle_filled</mat-icon>
</button>
Run Code Online (Sandbox Code Playgroud) 我正在使用@ angular/material2模块将datepicker添加到我的angular 4 app.
这是我的HTML
<mat-form-field>
<input matInput [matDatepicker]="picker" placeholder="Choose a date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
Run Code Online (Sandbox Code Playgroud)
app.module.ts
import {MatDatepickerModule,MatNativeDateModule,MatFormFieldModule,MatInputModule} from '@angular/material';
Run Code Online (Sandbox Code Playgroud)
当我点击日期选择器切换器时,在页面的最末端打开的datepicker弹出窗口完全在表单字段之外,它应该打开.
任何帮助将不胜感激.
我有一些字符串数组,我希望将每两个字符串放在一起使用ng.这是我尝试的内容:
<div class='row wow fadeInUp' *ngFor='let index of myArray;let i = index;'>
<div class='col-md-6'>
<md-card>
<md-card-header>
<md-card-title>
{{index}}
</md-card-title>
</md-card-header>
</md-card>
</div>
<div class='col-md-6' *ngIf='i+1 < myArray.length'>
<md-card>
<md-card-header>
<md-card-title>
{{myArray[i+1}}
</md-card-title>
</md-card-header>
</md-card>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
但是,当我添加新元素时,它复制了pervios元素,我真的不觉得它的原因是什么,所以如何用ngFor在每行中添加两个元素
如何使以下水平显示代替垂直显示(默认)?它位于通过Angular-CLI 1.7.2生成的Angular 5.2.7应用程序中的navigation.component.html中。注释中包含的文档链接没有讨论如何水平布置“材质”导航栏。
<mat-nav-list>
<!--https://material.angular.io/components/list/overview-->
<mat-list-item>
<a [routerLink]="['/home']">Home</a>
</mat-list-item>
<mat-list-item>
<a [routerLink]="['/about']">About</a>
</mat-list-item>
<mat-list-item>
<a [routerLink]="['/contact']">Contact Us</a>
</mat-list-item>
</mat-nav-list>
Run Code Online (Sandbox Code Playgroud)
我有一个看起来像这样的表单:
<form class="row" name="powerPlantSearchForm" (ngSubmit)="f.valid && searchPowerPlants()" #f="ngForm" novalidate>
<div class="form-group col-xs-3" >
<label for="powerPlantName">PowerPlant Name</label>
<input type="text" class="form-control-small" [ngClass]="{ 'has-error': f.submitted && !powerPlantName.valid }" name="powerPlantName" [(ngModel)]="model.powerPlantName" #powerPlantName="ngModel" />
</div>
<div class="form-group col-xs-3" >
<label for="powerPlantType">PowerPlant Type</label>
<select class="form-control" [(ngModel)]="model.powerPlantType" name="powerPlantType">
<option value="" disabled>--Select Type--</option>
<option [ngValue]="powerPlantType" *ngFor="let powerPlantType of powerPlantTypes">
{{ powerPlantType }}
</option>
</select>
</div>
<div class="form-group col-xs-3" >
<label for="organizationName">Organization Name</label>
<input type="text" class="form-control-small" name="powerPlantOrganization" [(ngModel)]="model.powerPlantOrg" #organizationName="ngModel" />
</div>
<div class="form-group col-xs-3" >
<label for="powerPlantStatus">PowerPlant Active Status</label> …
Run Code Online (Sandbox Code Playgroud) 我正在使用Angular 5,并且想要更改占位符文本的颜色。列表中的文本内容可以正常工作(我可以更改颜色),但是占位符却不能。我不是通过应用程序的主要CSS搜索硬编码的解决方案,而是需要通过代码动态地对其进行更改。
<mat-form-field>
<mat-select placeholder="{{'TXTKEY' | translate }}" [style.color]="config.textColor">
<mat-option *ngFor="let item of items" [value]="item.identifier" (click)="OnChange(item)">
<div [style.color]="config.textColor"> {{item.name}}</div>
</mat-option>
</mat-select>
</mat-form-field>
Run Code Online (Sandbox Code Playgroud) angular ×9
javascript ×3
typescript ×3
angularjs ×1
css ×1
dropdown ×1
html ×1
iteration ×1
sweetalert ×1
sweetalert2 ×1