我在Angular中遇到HTTP问题.
我只想要GET一个JSON列表并在视图中显示它.
import {Injectable} from "angular2/core";
import {Hall} from "./hall";
import {Http} from "angular2/http";
@Injectable()
export class HallService {
public http:Http;
public static PATH:string = 'app/backend/'
constructor(http:Http) {
this.http=http;
}
getHalls() {
return this.http.get(HallService.PATH + 'hall.json').map((res:Response) => res.json());
}
}
Run Code Online (Sandbox Code Playgroud)
在HallListComponent我getHalls从服务中调用方法:
export class HallListComponent implements OnInit {
public halls:Hall[];
public _selectedId:number;
constructor(private _router:Router,
private _routeParams:RouteParams,
private _service:HallService) {
this._selectedId = +_routeParams.get('id');
}
ngOnInit() {
this._service.getHalls().subscribe((halls:Hall[])=>{
this.halls=halls;
});
}
}
Run Code Online (Sandbox Code Playgroud)
但是,我有一个例外:
TypeError:this.http.get(...).map不是[null]中的函数 …
我想在Angular2中制作一个圆形板.例如,我想制作10个圆圈,但实际上这个数字可以改变.我想计算每个圆的半径,所以它是动态的而不是静态的.例如,参见图片
这是我的代码
@Component({
selector:"circle"
template: `
<svg>
<circle *ngFor='#item of forLength #i=index #l=last #e=even'
cx="50%" cy="50%" [style.r]="calculateRadius()" stroke="black" stroke-width="5" fill="white"></circle>
<svg/>
`
})
export class CircleComponent{
public maxRadius:number=25;
public totalRounds:number=10;
public x:number=30;
public calculateRadius():number{
var distanceBetweenCircles=this.maxRadius/(this.totalRounds-1);
this.x-= distanceBetweenCircles;
return this.x;
}
}
Run Code Online (Sandbox Code Playgroud)
但是我收到以下错误:
calculateRadius() in CircleComponent@7:30' has changed after it was checked.
Previous value: '-7.500000000000007'.
Current value: '-36.66666666666668' in [calculateRadius() in CircleComponent@7:30]
Run Code Online (Sandbox Code Playgroud)
有没有更好的方法来编写这个for循环*ngFor而不是在单独的方法中写这个?
我的项目中有2个对象:a company和a user.我有一个表单,用户可以在其中更新他的个人资料.他可以更新的一件事是国家.现在显示我使用下拉列表的国家/地区.
我想设置selected属性的选项,其中name的country等于实际country的user.(country.name==user.country)
这是我尝试过但它似乎不起作用.
<select>
<option *ngFor="#c of countries" [ngStyle]="setStyles()" [ngValue]="c">{{c.name}}</option>
</select>
setStyles(){
let styles;
if (this.companies[i].name == this.user.country ) {
styles = {
'selected'
}
return styles;
}
Run Code Online (Sandbox Code Playgroud)