Question

我正在尝试访问http://localhost:4200/Personnes/view/:2，但出现错误（错误TypeError：无法读取未定义的属性'nom'）

“我的personnnes.service.component.ts”

`export class PersonnesService {
baseUrl='http://localhost/api' ;
personnes: Personne[] = [] ;

constructor(private http:HttpClient) { }

getAll():Observable<Personne[]>{
return this.http.get(`${this.baseUrl}/list`).pipe(
map((res)=>{
this.personnes=res['data'] ;
return this.personnes ;
}),
catchError(this.handleError)) ;
} ;

private handleError(error :HttpErrorResponse){
console.log(error) ;
return throwError('Erreur sur qlq chose.') ; 
}

store(personne: Personne): Observable<Personne[]> {
return this.http.post(`${this.baseUrl}/store`, { data: personne }) 
.pipe(map((res) => {
this.personnes.push(res['data']);
return this.personnes;
}),
catchError(this.handleError));
}

getSinglePersonne(id:number)
{
const pers=this.personnes.find(personneObject =>  personneObject.id === 
id) ;
return pers ;
}`

"My single-personnne.component.ts"
`export class SinglePersonneComponent implements OnInit {

personne =new Personne(0,'','','') ;

constructor(private route:ActivatedRoute,
private personnesService:PersonnesService,
private router:Router) { }

ngOnInit() {   
const id=this.route.snapshot.params['id'] ;
this.personne = this.personnesService.getSinglePersonne(+id) ;
}`

“我的模板single-personnne.component.html” `

<div>
<h2>Nom :</h2>
<h3>{{personne.nom}}</h3>
</div>
<div>
<h2>Prénom :</h2>
<h3>{{personne.prenom}}</h3>
</div>
<div>
    <h2>Numéro Téléphone:</h2>
    <h3>{{personne.numTel}}</h3>
</div>

 <button class="btn btn-default" (click)="updatePers()">Modifier</button>

` 我期望得到一个id = 2的人员，并希望将其显示在模板中

Answer 1

您的服务方法应如下所示：

    return this.http.get(`${this.baseUrl}/list`).pipe(
        map(res => {
            return res['data'];
        }),
        filter(person => person.id === id),
        catchError(this.handleError)
    );
}

和组件：

ngOnInit() {   
    const id=this.route.snapshot.params['id'] ;
    this.personnesService.getSinglePersonne(id).subscribe(person => this.personne = person);
}

Answer 2

您的服务方法getSinglePersonne为特定的pers返回一个空的id。可能有两个原因

特定ID不在数组中
或者情况personneObject.id === id引起了故障。尽管使用===总是一个好习惯，但是您可以使用==来验证这是否是导致问题的原因。

现在，由于服务方法未返回任何匹配的对象，this.personne仍未定义，因此您将面临错误。

Answer 3

在您的网址global $post; ?> <?php if ($post->ID == $pageid): ?> <script type="text/javascript"> $("a").each(function() { if ($(this).attr("rel")) { $(this).removeAttr("rel"); } }); </script> <?php endif; ?>中，您的ID为'：2'，因此http://localhost:4200/Personnes/view/:2中的+id将解析为this.personnesService.getSinglePersonne(+id)，因此您将尝试搜索一个人NaN，并且始终为id === NaN。您应该将网址更改为false，它应该可以正常工作。

有什么需要补充的吗？

3 个答案: