我正在尝试将我的第一个angular2应用程序设置为实验并使用最新的beta版本.
我面临一个奇怪的问题,我在视图中使用的变量在设置超时后没有更新.
@Component({
selector: "my-app",
bindings: []
})
@View({
templateUrl: "templates/main.component.html",
styleUrls: ['styles/out/components/main.component.css']
})
export class MainComponent {
public test2 = "initial text";
constructor() {
setTimeout(() => {
this.test2 = "updated text";
}, 500);
}
}
正如你所看到我有一个名为test2的变量,在构造函数中我设置了500毫秒的超时,我将值更新为"更新文本".
然后在我的视图main.component.html我只是使用:
{{ test2 }}
但是,即使更新部分被命中,该值也永远不会被设置为"更新文本"并永远保留在"初始文本"上.如果我按照angular2教程,他们真的没有给我这个解决方案的答案.想知道是否有人会知道我在这里缺少什么.
编辑:我正在使用的完整代码包括bootstrap和html等
<html>
<head>
<title>Angular 2</title>
<script src="/node_modules/systemjs/dist/system.src.js"></script>
<script src="/node_modules/reflect-metadata/reflect.js"></script>
<script src="/node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="/node_modules/q/q.js"></script>
<script src="/node_modules/jquery/dist/jquery.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="/bower_components/breeze-client/breeze.debug.js"></script>
<script src="/bower_components/datajs/datajs.js"></script>
<script src="/bower_components/bootstrap-less/js/collapse.js"></script>
<script src="/bower_components/bootstrap-less/js/modal.js"></script>
<script src="/bower_components/signalr/jquery.signalR.js"></script>
<script src="http://localhost:64371/signalr/js"></script>
<link href="styles/out/main.css" type="text/css" rel="stylesheet" />
<script>
System.config({ …我正在尝试学习angular2并使用odata webapi后端创建了一个测试应用程序.在应用程序中,我有一个视图,它获取一个项目数组,我想在我的视图中显示这些.
为了从前端获取数据我正在使用breezejs库,因为它已经证明在过去节省了我很多时间,我喜欢将它与odata后端一起使用.
调用树和应用程序结构如下所示:
通过从视图中调用服务函数开始调用以开始获取项目(请注意,我将从每次调用返回es-6承诺):
this._scrumModuleService.fetchActiveSessions().then((sessions: ScrumSession[]) => {
// Here i have to call zone.run else my view wont update.
this._zone.run(() => {
this.sessions = sessions;
});
}).catch((error: any) => {
debugger;
});
然后从视图中它将转到服务,该服务又调用存储库:
public fetchActiveSessions(): Promise<ScrumSession[]> {
return this._scrumSessionRepository.fetchActiveSessions();
}
存储库获取功能:
public fetchActiveSessions(): Promise<ScrumSession[]> {
return this._dataContext.fetch(new breeze.EntityQuery().from("ScrumSessions").expand(['creator', 'scrumRoom','productOwner', 'users']));
}
然后最终存储库调用(通用)datacontext,它将使用breeze entitymanager执行查询:
public fetch(query: breeze.EntityQuery, isRetry: boolean = false): Promise<any> {
return new Promise((resolve, reject) => {
this.entityManager.executeQuery(query).then((result: breeze.QueryResult): void => {
// Data has been fetched, …我正在使用oauth作为授权提供程序在asp.net中创建自己的webapi.api wil基本上可以作为我称之为不同模块的提供者.一个可以是图库,另一个可以是具有不同类型用户的用户登录模块.
我有oauth部分工作正常.Api用户可以通过使用登录凭据调用/ Token端点来注册然后请求令牌.
但是我现在想在api中创建另一个单独的用户模块,只有注册的apiusers才能访问.我希望这个模块有另一个注册和登录功能,并有自己的端点登录(/ UserModuleToken或类似的东西).来自用户模块的用户是与Api用户不同的用户.因此apiusers是想要在我的api中调用特定模块的实际开发人员,而用户模块中的用户是在实现该模块的站点上注册的用户.
我的所有apicontrollers都将拥有api用户的[Authorize]属性,我想要特定的属性,例如用户模块中的某些功能,用[UserModuleAuthorize]属性进行修饰.
您可以在下面看到我的api用户实体模型:
public class ApiUserEntity : BaseEntity
{
public string Username { get; set; }
public string Password { get; set; }
public string Email { get; set; }
public string Salt { get; set; }
public ApiUserLevel Level { get; set; }
}
可以验证api用户的userservice函数:
public UserLoginResult LoginUser(ApiUserEntityLoginForm userForm)
{
// retrieve user from database
var user = _userRepository.GetUser(userForm.UserName);
if(user == null)
return _modelStateWrapper.AddError(UserLoginResult.UserNotFound, "User does not exist");
var passwordHash = PasswordHash.HashPassword(user.Salt, userForm.Password);
// …我发现了一个涉及bootstrapjs模态和angular2的奇怪问题.我有一个绑定到bootstrap模式的html的组件:
// ... lots of imports here
@Component({
selector: 'scrum-sessions-modal',
bindings: [ScrumSessionService, ScrumSessionRepository, ScrumModuleDataContext, ElementRef]
})
@View({
templateUrl: 'templates/modals/scrumSessions.modal.html',
styleUrls: ['']
})
export class ScrumSessionsModalComponent {
private _elementRef: ElementRef;
public sessions: ScrumSession[];
constructor(scrumSessionsProxy: ScrumSessionsProxy, scrumSessionService: ScrumSessionService, elementRef: ElementRef) {
this._proxy = scrumSessionsProxy;
this._scrumSessionService = scrumSessionService;
this._elementRef = elementRef;
// This is the bootstrap on shown event where i call the initialize method
jQuery(this._elementRef.nativeElement).on("shown.bs.modal", () => {
this.initialize();
});
jQuery("#scrumSessionsModal").on("hidden.bs.modal", () => {
this.cleanup();
});
}
public initialize() {
// Start …我正在开发一个相对简单的应用程序,我想了解更多有关ngrx,redux和angular 2的信息.
我将简要介绍一下我的app,appstate和reducer的设置.
在我的应用程序中,我想使用webgl框架在我的屏幕上绘制某些对象(网格).我想通过创建具有这些网格属性的简单对象,并通过ngrx存储添加网格,并将其保存在应用程序状态中.每当添加"网格"时,我想使用ngrx sideeffects在屏幕上使用可访问webgl框架的服务绘制网格.
我的(简化)appstate看起来像这样:
export interface AppState {
meshList: MeshListReducer.MeshListState
}
要添加网格,我创建了以下reducer函数:
case MeshActions.ADD_MESH: {
return Object.assign({
entities: [meshAction.payload, ...state.entities]
});
}
case MeshActions.ADD_MESH_SUCCESS:
case MeshActions.UPDATE_MESH: {
// This reducer function is only being called once, see below for further explanation.
return Object.assign({}, state, {
entities: state.entities.map(meshItem => {
// If we can find a mesh with this id, use the sub reducer to update it.
if (meshItem.uuid === meshAction.payload.uuid)
return meshSubReducer(meshItem, meshAction);
return meshItem;
})
});
} …angular ×4
typescript ×4
javascript ×2
access-token ×1
angular5 ×1
breeze ×1
c# ×1
ecmascript-6 ×1
jquery ×1
ngrx ×1
oauth-2.0 ×1
promise ×1
redux ×1