无法使用 angular 访问属性

Question

I am trying to display properties from data but it doesn't work & i don't understand why. No error in the console.

My component:

export class BlogpostComponent implements OnInit {
blogpost$: Observable<BlogPost>;
id;
blogsId;

constructor(private activatedRoute: ActivatedRoute, private blogpostService: BlogpostService) {}

getBlog(id) {
    this.id = id;
    id = this.activatedRoute.snapshot.paramMap.get('id');
    console.log('id', id);
    this.blogpost$ = this.blogpostService.getPost(id);
    console.log('blogpost', this.blogpost$);
}

ngOnInit() {
    this.getBlog(this.id);
    console.log('OBS', this.blogpost$);
}

my view:

<div>{{ blogpost$ | async | json }}</div>
<ng-container *ngIf="blogpost$ | async as bp; else loading">
  <div
  class="card text-white bg-secondary mb-3" 
  style="max-width: 18rem;"
  >
  <div class="card-header">{{ bp.content }}</div>
  <div class="card-body">
    <h5 class="card-title">Hello there</h5>
    <p class="card-text">
      Hello text
    </p>
  </div>
</div>
</ng-container>

<ng-template #loading>Loading post ...</ng-template>

my service:

@Injectable({
  providedIn: "root"
})
export class BlogpostService {
  url = "http://localhost:3000";

  constructor(private httpClient: HttpClient) {}

  getAllPosts(): Observable<BlogPost[]> {
    return this.httpClient.get<BlogPost[]>(`${this.url}/allblogs`);
  }

  getPost(id): Observable<BlogPost> {
    return this.httpClient.get<BlogPost>(`${this.url}/blog/${id}`);
  }
}

this <div>{{ blogpost$ | async | json }}</div> <div>{{ blogpost$ | async | json }}</div> <div>{{ blogpost$ | async | json }}</div> print the json with all properties as it should.

But when i call properties in my view {{ bp.content }} , i've nothing displayed.

Thanks for your help.

Answer 1

Problem seems to be that blogPost$ is being set to an array of blog posts instead of an object, that's why {{ bp.content }} is not displaying anything.

Even though BlogPost is defined as an object instead of an array, at runtime, you can still assign an array to the variable which is what is happening here.

Answer 2

I can't see where you've defined bp . So you should either define it or replace it with the defined one blogpost .

Update After finding the definition as alias in the HTML I would try to do bp?.content .