我在 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当变量是某种数据类型时,这是否可以加载标签?如果没有,有什么解决方法吗?
我正在尝试为我的用户角色显示复选框:
例如。我有两个用户角色: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>
<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
我已经angular2 & mongoDB配置好了.到目前为止,我能够使用http服务读取json文件,但我想开发一个完整的应用程序,它也将具有数据库连接.
所以我想知道如何配置我的angular2应用程序,以便它可以与数据库进行交互.
有什么投入?
提前致谢.
我用npm创建了一个angular2项目.我指的是这个链接: Angular2 Tutorial
我package.json使用npm init命令成功创建了文件.但我没有找到任何创建tsconfig.json文件的命令.我不确定我应该使用命令还是使用编辑器创建该文件?提前致谢.
我正在开发这个 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)
但是,我只能检测到第一个变量的变化。第二个变量在父变量中的值发生变化时不会更新。
任何输入?
我正在为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 $()的对象
有没有办法做到这一点?
我很长时间以来一直坚持这个问题.
任何输入?
谢谢
我在角度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) 我在angular2项目中工作,想知道有什么方法可以在angular2中使用uib-tabset吗?
我之前使用过angularjs,我可以使用ng-bootstrap.
所以我可以<uib-tabset></uib-tabset>轻松使用.
但我不确定如何在angular2中这样做?任何输入?
我有一个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) 我有两个div.
var e1 = element(by.id('draggable-0'));
var e2 = element(by.id('dropContainer-0'));
Run Code Online (Sandbox Code Playgroud)
我想删除e1在e2.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被打开但没有任何反应.
任何输入?
谢谢.
angular ×10
typescript ×6
javascript ×3
checkbox ×1
e2e-testing ×1
formgroups ×1
instanceof ×1
jasmine ×1
mongodb ×1
ng-bootstrap ×1
ng-modules ×1
ng-switch ×1
npm ×1
protractor ×1
tsconfig ×1
typeof ×1