1.使用cnpm安装jQuery和bootstrap后,页面没有加载的问题

-使用cnpm安装的路径和使用npm安装路径不一样,解决如下:

把css路径改成
"../node_modules/_bootstrap@3.3.7@bootstrap/dist/css/bootstrap.min.css"
使用node_modules里的带版本号的文件,原因是nodee_modules下的bootstrap只是一个快捷方式,不信你打开目录看下,如果是用webstorm开发的话,仔细看下文件夹右上角是不是带有一个箭头。

2.Property 'map' does not exist on type 'Observable'

解决方案:增加import 'rxjs/add/operator/map'

 3.修复4.0后http请求错误的问题:unused import {httpModule} from '@angular/http'或者NullInjectorError: No provider for Http

解决方案:

1)引入

import {HttpClient} from "@angular/common/http";

import * as _ from 'lodash';

2)修改调用

.map(data => _.values(data))

附参考地址:https://segmentfault.com/a/1190000010259536

 4.anguar5 http proxy 代理设置无效

解决方案:URL地址后增加/*,如:“api/”改为“api/*”,还需要增加一个pathRewrite节点

"/api/*": {
"target": "http://localhost:26220/api",
"changeOrigin": true,
"secure": false,
"logLevel": "debug",
"pathRewrite": {"^/api" : ""}

具体pathRewrite节点的配置不太明白,应该是一个地址重写,将以“/api”开头的请求重写为空,根据日志打印出来的内容为:

[HPM] Rewriting path from "/api/product" to "/product"
[HPM] GET /api/product ~> http://localhost:26220/api

先重写了路径为“/product”,然后发起get请求后target到了 http://localhost:26220/api下,如果连起来就是访问http://localhost:26220/api/product

最后放上参考链接:https://stackoverflow.com/questions/43616755/angular-cli-proxy-doesnt-work

 5.angular5 下的observable问题,webapi接口返回了product[]数据,angular接收时转换为product[]时颇费周折,看视频中直接json就行了,其实angular4的http模块已经升级为httpclient了,而且调用方法也有所不同,试了很多种方法都不行,最后发现直接在get后要定义的格式即可,如下所示:

getProducts(): Observable<Product[]> {
const products = this.http.get<Product[]>('/api/product');
return products;
}

终于解决了。。。。

 6.httpClient 发起get请求拼接请求参数使用reduce失效的问题,原本使用的方法如下:

 Object.keys(params).filter(key => params[key]).reduce((sum: HttpParams, key: string) => {
sum.set(key, params[key]);
return sum;
}, new HttpParams());

修改之后的方法如下:

Object.getOwnPropertyNames(params)
.reduce((p, key) => p.set(key, params[key]), new HttpParams());

参考链接:https://github.com/angular/angular/issues/18012

跟着一个angular4的视频学习angular,我本地是angular5,前面基础知识还好,到这个http这块问题不少,一个坑接着一个坑。。。。。




posted on 2017-12-12 23:34  芝麻的西瓜  阅读(1086)  评论(0编辑  收藏  举报