角度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'; 
} 

：コンソールをチェック/デバッグするとき、私は

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

これはメソッドですがありcomponent.htmlに

を正しいデータが返されているように見えますが、画面上のデータが間違っています

ページがレンダリングされると、これが出力されます：

placeholder with name "headline" not found 

それはVされている必要がありますplaceholder.textプロパティの値。コンソールで私はこれを持っています：

誰もがここで起こっていることにいくつかの光を置くことができますか？ここで

は私のコンポーネントの完全なコードです：

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

は、以下のことを試してください： "forEachの" ああ <p *ngIf="posting"> {{ getPlaceholderText('headline') }} </p>

Answer 2

は活字体ではありません。それはjavascriptのであるので、

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

は

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

でなければなりませんし、それは