小编Veg*_*ega的帖子

如何订阅afterClosed后的angularMaterial Dialog?

关于关闭对话框.https://material.angular.io/components/component/dialog afterClosed不可用吗?

与官方主要文件一样:

在此输入图像描述

错误

Property 'then' does not exist on type '() => Observable<any>'. [default] Checking finished with 1 errors

我试过订阅,但也没办法.

angular-material angular

8
推荐指数
3
解决办法
2万
查看次数

如何在导出的函数中注入服务?

我写了一个'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,因为我需要从每个组件事件中创建它,尽管组件不需要它用于其他目的.你能给我一些指导吗?

angular

8
推荐指数
1
解决办法
1625
查看次数

angular2多士炉 - 没有烤箱容器已经初始化以接收烤面包

我在角度应用中使用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)

任何解决方案

typescript angular-services angular angular2-toaster

8
推荐指数
1
解决办法
7093
查看次数

SweetAlert2,.then() - 不立即更新DOM

问题:
我想在甜蜜警报上单击"确定"后将用户重定向到另一个页面,但是在我出于某种原因打开另一个甜蜜警报之前,用户不会被重定向.
您可以在代码上断点,但页面上没有任何反应.

问题的简单例子: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)

javascript angularjs sweetalert sweetalert2

8
推荐指数
1
解决办法
466
查看次数

更改mat-icon按钮的大小

如何更改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-material angular

8
推荐指数
4
解决办法
2万
查看次数

@ angular/material datepicker位置

我正在使用@ 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弹出窗口完全在表单字段之外,它应该打开.

任何帮助将不胜感激.

angular-material angular

8
推荐指数
3
解决办法
7037
查看次数

迭代行中的两个元素ngFor angular

我有一些字符串数组,我希望将每两个字符串放在一起使用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在每行中添加两个元素

iteration angular-material angular-material2 angular

8
推荐指数
1
解决办法
1万
查看次数

Mat-Nav-List是水平的还是垂直的?

如何使以下水平显示代替垂直显示(默认)?它位于通过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)

angular-material angular

8
推荐指数
5
解决办法
1万
查看次数

Angular 4 Reset按钮重置DropDown默认值

我有一个看起来像这样的表单:

<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)

html javascript typescript dropdown angular

7
推荐指数
2
解决办法
1万
查看次数

通过代码更改角度垫选择占位符的颜色

我正在使用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)

javascript css typescript angular-material angular

7
推荐指数
3
解决办法
7139
查看次数