创建此程序时,标题中出现错误。我尝试使用Angular从REST API获取一些信息。我附加了服务,组件中的ts和html。我为此使用rxjs和Observable。我将服务注入到构造函数中。我将不胜感激。谢谢!
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { HeroService } from './services/hero.service';
import {Customer} from './models/customer';
@Component({
selector: 'app-hero',
templateUrl: './hero.component.html',
styleUrls: ['./hero.component.scss']
})
export class HeroComponent implements OnInit {
private ndg: string;
public customerData;
constructor(private heroService: HeroService) {
this.ndg='117158101';
}
ngOnInit() {
this.heroService.getCustomerInfo(this.ndg)
.subscribe(data => { this.customerData=data,
console.log(this.customerData)
}, error => console.log(error));
}
}
import { Injectable } from '@angular/core';
import { ApiService } from '../../../../services/base.services';
import { Observable } from 'rxjs';
import { environment } from '../../../../../../environments/environment';
import {Customer} from '../models/customer';
@Injectable({
providedIn: 'root'
})
export class HeroService {
constructor(private apiService: ApiService) { }
getCustomerInfo(ndg: string) {
const url = `${environment.apiUrl}${environment.ur3Path}cifCustomerDetails/customers/${ndg}`;
return this.apiService.get(url);
}
}
<!--
-- Hero component
-->
<section class="hero">
<div class="content-hero" *ngFor="let customer of customerData">
<h1>Welcome to your loan <br/> application, {{customer.name}}</h1>
<h4>Your RM today is Sandra Menter.</h4>
</div>
</section>
答案 0 :(得分:1)
ngFor
是一种用于复制多个元素的标签的结构,就像您有大量客户一样。在您的情况下,无需使用它,它应该像这样简单:
<section class="hero">
<div class="content-hero">
<h1>Welcome to your loan <br/> application, {{customerData.customer.name}}</h1>
<h4>Your RM today is Sandra Menter.</h4>
</div>
</section>