각도 2. 구성 요소의 메서드가 여러 번 호출되고 잘못된 데이터를 반환합니다.

Question

페이지로드 및 잘못된 데이터를 반환 할 때 3 번 호출되는 모듈 내부에 메서드가 있습니다.

getPlaceholderText(placeholderName: string): string { 

console.log('Looking for placeholder with name "' + placeholderName + '"'); 

if (this.posting.placeholders != null) { 

    this.posting.placeholders.forEach(placeholder => { 
    if (placeholder.name === placeholderName) { 
     console.log('found placeholder with name "' + placeholderName + '"'); 
     console.log('Returning value: "' + placeholder.text + '"'); 
     console.log(''); 
     return placeholder.text; 
    } 
    }); 
} else { 
    return 'posting.placeholder is null'; 
} 

console.log(''); 
console.log('placeholder with name "' + placeholderName + '" not found'); 
return 'placeholder with name "' + placeholderName + '" not found'; 
} 

: 디버깅 할 때/올바른 데이터가 반환되고 있지만 화면에 데이터가 component.html에서

잘못로 나타나는 콘솔을 확인 난

<p ng-if="posting"> 
{{ getPlaceholderText('headline') }} 
</p> 

이

는 방법이 그것은 V 했어야

placeholder with name "headline" not found 

: 페이지가이 렌더링 는

출력 placeholder.text 특성의 값. 콘솔에서 나는 이것을 가지고있다 :

Looking for placeholder with name "headline" 
found placeholder with name "headline" 
Returning value: "Standard Post 1 headline" 

placeholder with name "headline" not found 

Looking for placeholder with name "headline" 
found placeholder with name "headline" 
Returning value: "Standard Post 1 headline" 

placeholder with name "headline" not found 

누군가는 여기에 무슨 일이 일어나고 있는지에 대해 약간의 빛을 줄 수 있는가? 다음을 시도

import { Component, OnInit } from '@angular/core'; 
import { environment } from '../../environments/environment'; 
import { ActivatedRoute } from '@angular/router'; 
import { Title } from '@angular/platform-browser'; 
import { Posting } from '../models/Posting'; 
import { SiteService } from '../shared/siteService/siteService.service'; 
import { finalize } from 'rxjs/operators'; 

@Component({ 
    selector: 'app-post', 
    templateUrl: './post.component.html', 
    styleUrls: ['./post.component.scss'] 
}) 
export class PostComponent implements OnInit { 

    version: string = environment.version; 
    postingId: number; 
    sub: any; 
    isLoading: boolean; 
    posting: Posting; 
    postingTitle: string; 

    constructor(
    private route: ActivatedRoute, 
    private titleService: Title, 
    private siteService: SiteService) { } 

    ngOnInit() { 

    this.isLoading = true; 
    this.posting = new Posting(); 

    this.sub = this.route.params.subscribe(params => { 
     this.postingId = +params['id']; 
     this.postingTitle = params['title']; 

     this.titleService.setTitle(this.postingTitle); 

     this.siteService.getPost({ id: this.postingId }) 
     .pipe(finalize(() => { this.isLoading = false; })) 
     .subscribe(posting => this.posting = posting); 
    }); 
    } 

    getPlaceholderText(placeholderName: string): string { 

    console.log('Looking for placeholder with name "' + placeholderName + '"'); 

    if (this.posting.placeholders != null) { 

     this.posting.placeholders.forEach(placeholder => { 
     if (placeholder.name === placeholderName) { 
      console.log('found placeholder with name "' + placeholderName + '"'); 
      console.log('Returning value: "' + placeholder.text + '"'); 
      console.log(''); 
      return placeholder.text; 
     } 
     }); 
    } else { 
     return 'posting.placeholder is null'; 
    } 

    console.log('placeholder with name "' + placeholderName + '" not found'); 
    return 'placeholder with name "' + placeholderName + '" not found'; 
    } 
} 

Answer 1

:

여기 내 구성 요소에 대한 전체 코드입니다 아 <p *ngIf="posting"> {{ getPlaceholderText('headline') }} </p>

Answer 2

"대해 forEach은"타이프 라이터 없습니다. 그것은 자바 스크립트, 그래서

this.posting.placeholders.forEach(placeholder => { 

는

for (const placeholder of this.posting.placeholders) { 

을해야하며, 그것은