угловой 6 с jsonplaceholder, открывающий сообщения / $ {id} после нажатия кнопки

Question

Я работаю над фиктивным приложением с jsonplaceholder, я получаю все сообщения, но не могу получить сообщение с динамическим идентификатором, например posts / $ {id}.Как я могу достичь этого.любезно помогите.У меня базовое приложение для создания углов.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<h1>{{title}}</h1>
<!--  -->
<main *ngIf="!some; else elseBlock">
    <section *ngFor="let dt of data">
        <aside>ID:  <span id="id">{{dt.id}}</span></aside>
        <aside>Title:  {{dt.title}}</aside>
        <button (click)="linkto()">click to view</button>
        <br>
        <hr>
    </section>
</main>
<ng-template #elseBlock>
    <section>
        <aside>ID:  {{data2.id}}</aside>
        <aside>Title:  {{data2.title}}</aside>
        <aside>Body:  {{data2.body}}</aside>
        <button (click)="linkto()">back</button>
        <br>
        <hr>
    </section>
</ng-template>

app.component.ts

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'app';
  constructor(private http : HttpClient){
    this.showPost();
  }
  data :any = [];
  id: any;
  data2 :any = {};
  some: boolean;
  showPost() {
    this.http.get('https://jsonplaceholder.typicode.com/posts')
    // clone the data object, using its known Config shape
    .subscribe(data => {
      console.log('**************',data);
      this.data = data
    });
  }
  linkto(){
    this.showPost2();
    this.some = !this.some;
  }
  showPost2() {
    this.http.get(`https://jsonplaceholder.typicode.com/posts/${id}`)
    .subscribe(data2 => {
      this.data2 = data2;
    });
  }

}

Мне также интересно, есть ли более короткий способ сделать это?вроде просто на одной странице.Я делаю запросы на получение, но после этого я буду делать посты, ставить, исправлять и удалять тоже.на самой странице app.component.html.

Answer 1

Вы должны отправить id из html в component, используя linkto(dt.id)

Затем вы можете использовать это id как parameter в ваших component методах.

HTML:

<main *ngIf="!some; else elseBlock">
    <section *ngFor="let dt of data">
        <aside>ID:  <span id="id">{{dt.id}}</span></aside>
        <aside>Title:  {{dt.title}}</aside>
        <button (click)="linkto(dt.id)">click to view</button>
        <br>
        <hr>
    </section>
</main>
<ng-template #elseBlock>
    <section>
        <aside>ID:  {{data2.id}}</aside>
        <aside>Title:  {{data2.title}}</aside>
        <aside>Body:  {{data2.body}}</aside>
        <button (click)="linkto(dt.id)">back</button>
        <br>
        <hr>
    </section>
</ng-template>

Компонент:

 linkto(id){
    this.showPost2(id);
    this.some = !this.some;
  }
  showPost2(id) {
    this.http.get(`https://jsonplaceholder.typicode.com/posts/${id}`)
    .subscribe(data2 => {
      this.data2 = data2;
    });
  }