angular2 所遇bug总结及解决方法

Cannot read property.某个属性未定义

如果总是提示某个属性未定义。那是因为angular2是异步执行的，我们的服务还没来得及返回数据就已经开始渲染模版页面了。所以我们在页面上用*ngIf来告诉模板引擎等数据存在时再渲染，也就是服务返回数据后再渲染模版。如下：

<div class="home-header" *ngIf="userName">
<a (click)="goLogin()">退出</a>
<p>{{userName}}</p>
</div>

ngfor循环中嵌入ngmodel，总显示最后一条数据。

angular2在ngfor循环中嵌入ngmodel，总显示最后一条数据。我认为是ngfor只支持单向的数据传递，而ngmodel是双向的数据传递；在ngfor中不希望列表中的数据被修改，所以我们在ngfor里使用“{{}}”插值表达式来显示数据，再绑定change事件来修改数据，以此来实现ngmodel的双向数据绑定。具体如下：

//修改level.BenifitList中的StartAmount
addBenifitStartAmount(index:number,event:any){
let start=Number(event.target.value);
if(start){
this.level.BenifitList[index].StartAmount=start;
}
}
//修改level.BenifitList中的Param
addBenifitParam(index:number,event:any){
let param=Number(event.target.value);
if(param){
this.level.BenifitList[index].Param=param;
}
}

angular2 使用webpack mock测试数据。

在angular2官方文档中是使用InMemoryWebAPIModule来制造测试数据，但它在添加和删除时不能返回报文，仅仅是添加和删除的数据，而不是这个数据的ID编号。因此我们还是得用node自己写一个测试服务器来返回相应的报文。

var express=require('express');
var app=express();

app.post('/msp/addlevel',function(req,res){ //这是添加会员的响应报文。当会员添加成功时会返回LevelId。其他的都不必太在意，后台规定的必有报文信息。
res.send('msg='+{
"MsgNo":"1001",
"MsgSn":"20160824092858871001",
"Version":"1.0",
"RspCode":"00",
"Desc":"成功",
"LevelId":"004"
});
});
app.post('/msp/deletelevel',res){ //这是删除会员的响应报文。删除成功后，RspCode：相应编码和Desc：描述；来确定是否删除成功。
res.send('msg='+{
"MsgNo":"1002",
"MsgSn":"20160824092858871002",
"Desc":"成功"
});
});

var server=app.listen(3000,function(){
var host=server.address().address;
var port=server.address().port;
console.log('Example app listening at http://%s:%s',host,port);
})

可是我们的webpack devserver运行时使用的是http://localhost:8080/ ，而node server使用的是http://localhost:3000/，这样就跨域了。不过webpack devserver可以设置代理，当我们请求的路径是在msp下时，就从8080端口代理到3000端口。在devServer中做如下配置：

module.exports = {
entry: {
'app': './src/main.ts'
},

module: {
loaders: [
{
test: /\.ts$/,
loaders: ['awesome-typescript-loader','angular2-template-loader']
},
{
test: /\.html$/,
loader: 'html'
},
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: 'file?name=assets/[name].[hash].[ext]'
}
]
},
devServer: {
historyApiFallback: true,
stats: 'minimal',
proxy:{
'/msp/*':{
target:'http://localhost:3000'
}
}
}
};

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays

出现这种错误是因为你要ngfor 的数据是对象，而不是数组。仔细查看代码就能找出来。

angular2中label标签的for属性绑定插值表达式报错。

解决方法：<label attr.for={{表达式}}></label>

angular2 页面刷新404

当我们把开发好的前端资源放到服务器上后，刷新页面报404错误。比如http://test.xxxx.com.cn/msph5刷新404。那是因为我们在angular2中所写的路由没有在浏览器里去寻找，而跑到服务器上找对应路径上的文件。

解决方法：在app.module.ts里面添加引用。

import { HashLocationStrategy,LocationStrategy } from '@angular/common';

再在ngModule里面的providers里添加

{provide: LocationStrategy,useClass: HashLocationStrategy}

例如app.module.ts如下：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HashLocationStrategy,LocationStrategy } from '@angular/common';

@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
providers: [{provide: LocationStrategy,useClass: HashLocationStrategy}],
bootstrap: [AppComponent],
})
export class AppModule {}

js MD5加密和Java MD5加密不一致。（utf16le编码）

登录时由前端对密码进行加密，把密文发送给后台。后台的加密方式是字符串转码成utf16le，然后md5加密，再转base64大写字符串。

解决与实现：js中字符串转码一般都是默认的utf8，utf16le可以看成是两个utf8组成，即在utf8编码后面再补0。md5加密插件用的是js-md5，既可以传入字符串参数，又可以传入整数数组。后台是对MD5后的数组进行转base64，故而js就用String.fromCharCode.apply(null,new Uint8Array(buf))来获得Uint8Array，再bota转成base64。具体实现如下：

var buf = new ArrayBuffer(password.length*2);
var bufView = new Uint8Array(buf);
for (var i=0,strLen=password.length; i < strLen; i++) {
bufView[i*2] = password.charCodeAt(i);
bufView[i*2+1] = 0;

}

var hash = MD5.create();
hash.update(bufView);

var u8 = new Uint8Array(hash.array());

data.Password=btoa(String.fromCharCode.apply(null,u8)).toUpperCase(); //data.Password 就是发送给后台的加密密码.
data.Password=data.Password.toString().replace(/\+/g,'%2B'); //application/x-www-form-urlencoded 上传数据，防止“+”号被替换成空格。

angular2 response cannot read 响应报文无法读取

应该是跨域的问题，详细的解释和解决方法在：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

angular2 loadchildren system is not defined 子路由没有被定义

我在做懒加载的时候报了这个错误，原因angular2默认是用SystemJs模块来取懒加载模块，而我没用SystemJs，用的是Webpack。所以要安装angular2-router-loader，并在webpack中配置。

angular2 所遇bug总结及解决方法

相关文章