小编Bhu*_*kar的帖子

如何在角度数据类型上使用 ngSwitch?

我在 angular2 工作,很想知道<div>当变量是某种数据类型时我是否可以使用 ngSwitch 加载标签。

 <div [ng-switch]="value">
  <p *ng-switch-when="isObject(value)">This is Object</p>
  <p *ng-switch-when="isArray(value)">This is Array</p>
  <p *ng-switch-when="isBoolean(value)">This is Boolean</p>
  <p *ng-switch-when="isNumber(value)">This is Number</p>
  <p *ng-switch-default>This is Simple Text !</p>
</div>
Run Code Online (Sandbox Code Playgroud)

div当变量是某种数据类型时,这是否可以加载标签?如果没有,有什么解决方法吗?

typeof instanceof typescript ng-switch angular

6
推荐指数
1
解决办法
2710
查看次数

Angular 4:如何以反应形式将字符串数组分配到复选框中

我正在尝试为我的用户角色显示复选框:

例如。我有两个用户角色:1.Admin 2.Employee

我在 userObject 中有一组角色:

user={
    "name":"Bhushan",
    "email":"bhushan@yaho.com",
    "roles":['Admin','Employee']
}
Run Code Online (Sandbox Code Playgroud)

我想使用反应形式将这个模型填充到表单中。我想将角色数组填充到只读复选框中,即当表单加载时,用户可以编辑姓名和电子邮件,但admin如果用户具有管理员角色,复选框将显示为切换状态,如果用户不是管理员,则复选框将显示为切换状态。员工角色也是如此。

到目前为止,我尝试过以下操作:

<form [formGroup]="userForm" (ngSubmit)="onSubmit()" novalidate>
  <div style="margin-bottom: 1em">
    <button type="submit" [disabled]="userForm.pristine" class="btn btn-success">Save</button> &nbsp;
    <button type="reset" (click)="revert()" [disabled]="userForm.pristine" class="btn btn-danger">Revert</button>
  </div>
  <div class="form-group">
    <label class="center-block">Name:
        <input class="form-control" formControlName="name">
    </label>
  </div>
  <div class="form-group">
    <label class="center-block">Email:
        <input class="form-control" formControlName="email">
    </label>
  </div>
  <div class="form-group" *ngFor="let role of roles;let i=index">
    <label>
        // I tried this, but it doesn't work
        <!--<input type="checkbox" [name]="role" [(ngModel)]="role">-->
       {{role}}
    </label>
  </div>
</form>

<p>userForm value: {{ …
Run Code Online (Sandbox Code Playgroud)

javascript checkbox typescript angular angular-reactive-forms

6
推荐指数
1
解决办法
5192
查看次数

如何将mongoDB连接到angular2应用程序?

我已经angular2 & mongoDB配置好了.到目前为止,我能够使用http服务读取json文件,但我想开发一个完整的应用程序,它也将具有数据库连接.

所以我想知道如何配置我的angular2应用程序,以便它可以与数据库进行交互.

有什么投入?

提前致谢.

javascript mongodb typescript angular

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

如何在angular2项目中创建tsconfig.json文件?

我用npm创建了一个angular2项目.我指的是这个链接: Angular2 Tutorial

package.json使用npm init命令成功创建了文件.但我没有找到任何创建tsconfig.json文件的命令.我不确定我应该使用命令还是使用编辑器创建该文件?提前致谢.

npm typescript tsconfig angular

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

angular2 ngOnChanges 不适用于多个输入

我正在开发这个 angular2 应用程序,其中我在一个组件中接受两个输入。

我使用 ngOnChanges 来检测这些输入值的变化。

@Input() games: any;
@Input() selectedGame:any;

ngOnChanges(changes: {[propName: string]: SimpleChange}) {    
    this.selectedGame=changes['selectedGame'].currentValue;  //this works
    this.games=changes['games'].currentValue;    //this doesn't work
}
Run Code Online (Sandbox Code Playgroud)

但是,我只能检测到第一个变量的变化。第二个变量在父变量中的值发生变化时不会更新。

任何输入?

javascript typescript angular

4
推荐指数
1
解决办法
4528
查看次数

如何在测试angular2组件时模拟可观察的流?

我正在为angular2组件编写测试用例.

我创建了一个使用observable流的服务,如下所示:

import {Injectable}      from '@angular/core'
import {Subject} from 'rxjs/Subject';
import {User} from './user.model';

@Injectable()
export class UserService {

  selectedUserInstance:User = new User();

  // Observable selectedUser source
  private selectedUserSource = new Subject<User>();

  // Observable selectColumn stream
  selectedUser$ = this.selectedUserSource.asObservable();

  // service command
  selectUser(user:User) {
    this.selectedUserInstance=user;
    this.selectedUserSource.next(user);
  }
}
Run Code Online (Sandbox Code Playgroud)

现在在我的组件中,我订阅了这个流:

getSelectedUser() {
    this.subscriptionUser = this.userService.selectedUser$.subscribe(
      selectedUser => {
        this.selectedUser = selectedUser;
      }
    );
}
Run Code Online (Sandbox Code Playgroud)

现在在我的spec.ts文件中,我想将此流模拟为:

spyOn(userService, 'selectedUser$')
        .and.returnValue(Observable.of({
            'name': 'bhushan',
            'desc': 'student'
        }));
Run Code Online (Sandbox Code Playgroud)

但它一直给我以下错误:

错误:spyOn找不到要监视selectColumn $()的对象

有没有办法做到这一点?

我很长时间以来一直坚持这个问题.

任何输入?

谢谢

jasmine angular2-testing angular2-observables angular

4
推荐指数
1
解决办法
6083
查看次数

formGroup需要一个FormGroup实例:angular 4

我在角度4中创建了一个formGroup,其中用户和组织存储在对象中.现在我想使用这两个对象填充我的表单组.在我的ts中,我做了以下事情:

createForm(user: any) {
    this.userForm = this.fb.group({
      name: user.profileData.name,
      email: user.profileData.email,
      phone: user.profileData.mobileNumber,    
      orgForm: this.fb.group({
        name: [ user.organisation.name , [Validators.required]]
      })
    });
}
Run Code Online (Sandbox Code Playgroud)

在我看来,我正在做这样的事情:

<form [formGroup]="userForm" class="user-form" (ngSubmit)="onSubmit()" novalidate>
      <div fxLayout="row">
        <div fxLayout="column" fxFlex="50%">
          <div class="form-group">
            <md-input-container class="full-width">
              <input mdInput placeholder="User Name" formControlName="name">
            </md-input-container>
          </div>
          <div class="form-group">
            <md-input-container class="full-width">
              <input mdInput placeholder="User Email" formControlName="email">
            </md-input-container>
          </div>
          <div class="form-group">
            <md-input-container class="full-width">
              <input mdInput placeholder="User Phone" formControlName="phone">
            </md-input-container>
          </div>
          <div class="form-group">
            <button md-raised-button type="submit" [disabled]="userForm.pristine">Save</button>
          </div>
        </div>
        <div fxLayout="column" fxFlex="50%" formGroupName="orgForm">
          <div …
Run Code Online (Sandbox Code Playgroud)

angular angular-forms formgroups

4
推荐指数
1
解决办法
5321
查看次数

如何使用ng-bootstrap在angular2中使用uib-tabset?

我在angular2项目中工作,想知道有什么方法可以在angular2中使用uib-tabset吗?

我之前使用过angularjs,我可以使用ng-bootstrap.

所以我可以<uib-tabset></uib-tabset>轻松使用.

但我不确定如何在angular2中这样做?任何输入?

angular-ui-bootstrap ng-bootstrap angular

3
推荐指数
1
解决办法
3649
查看次数

如何在angular2中使用sharedModule?

我有一个angular2组件,我想在多个模块之间共享.

所以我写了下面的sharedModule,

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {GenericComponent} from './generic/generic.component';
@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ GenericComponent ],
  exports:      [ GenericComponent ]
})
export class SharedModule { }
Run Code Online (Sandbox Code Playgroud)

然后我将这个sharedModule添加到多个模块,如下所示:

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {SharedModule} from './shared.module';
import { AppComponent } from './app.component';
@NgModule({
  imports:      [ BrowserModule,SharedModule ],
  declarations: [ AppComponent ],
  exports:      [ AppComponent ],
  bootstrap: [AppComponent]
})
export class AppModule …
Run Code Online (Sandbox Code Playgroud)

typescript angular2-modules ng-modules angular

3
推荐指数
1
解决办法
6236
查看次数

如何在angular2中模拟量角器中的拖放动作?

我有两个div.

var e1 = element(by.id('draggable-0'));
var e2 = element(by.id('dropContainer-0'));
Run Code Online (Sandbox Code Playgroud)

我想删除e1e2.IE执行拖放在E2E测试用例跌幅为angular2.

我尝试下面的代码:

var e1 = element(by.id('draggable-0'));
var e2 = element(by.id('dropContainer-0'));
browser.driver.actions().dragAndDrop(e1.getWebElement(),e2.getWebElement()).perform();
browser.sleep(2000);
Run Code Online (Sandbox Code Playgroud)

但它不起作用.我的chrome被打开但没有任何反应.

任何输入?

谢谢.

drag-and-drop protractor e2e-testing angular

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