添加內容並立即以真實服務器的角度顯示它

Question

我從角度跟隨tour of heroes。現在我試圖用Drupal作爲後端在現實生活中做到這一點。

一切工作正常，所有的GET，POST，PUT和DELETE方法都很好......但

當我創建的內容，只有這樣，才能看到它反映是通過更新頁面所以我問題是：如何創建內容並立即在角度頁面中顯示它。

我不想更新頁面，我只是想看到反映的新內容。

[編輯]

一些代碼示例

Component.html

 <h5>Add Task</h5> 
     <form (ngSubmit)="onSubmit(taskName.value, taskBody.value)" #heroForm="ngForm"> 
      <div class="form-group"> 
      <label for="name">Task Name</label> 
        <input type="text" class="form-control" id="name" 
        required name="name" #taskName> 
      </div> 
     <div class="form-group"> 
      <label for="body">What to do</label> 
      <input type="text" class="form-control" id="body" name="body" #taskBody> 
     </div> 
     <button type="submit" class="btn btn-success">Submit</button> 

打印代碼：這是我想更新立即

<li *ngFor="let task of tasks" class="d-inline-block col-md-12"> 
    <a routerLink="/task/{{task.id}}" > {{task.name}}</a> 
    <!-- <span class="close big"></span> --> 
    <button class="close big" title="delete task" 
    (click)="delete(task)">x</button> 
</li> 

什麼

調用類組件的get任務功能，到service.ts

getTasks(): void { 
    this.taskService.getTasks() 
     .subscribe(Tasks => this.tasks = Tasks); 
} 

從表單中的數據發送到服務

onSubmit(name: string, body:string): void { 
    let task: any = { 
     type: [], 
     title: [], 
     body: []  
    }; 
    task.type.push({target_id: "task"}); 
    task.title.push({value: name}); 
    task.body.push({value: body}); 

     this.taskService.addTask(task) 
     .subscribe(task => { 
      this.tasks.push(task); 
      // console.log(JSON.stringify(task));  
     }); 
    } 

獲取任務功能，在服務

/** GET task by id. Will 404 if id not found */ 
getTask(id: number): Observable<Task> { 
    const url = `${this.taskUrl}/${id}`; 
    const returnGet = this.http.get<Task>(url); 
    // console.log (returnGet); 

    return returnGet 
    .pipe(
     map(tasks => tasks[0]), // returns a {0|1} element array 
     tap(h => { 
      const outcome = h ? `fetched` : `did not find`; 
      this.log(`${outcome} hero id=${id}`); 
     }),  
    catchError(this.handleError<Task>(`getTask id=${id}`)) 
); 
} 

在我使用的不是英雄的榜樣之旅的service.ts

addTask (task: Task): Observable<Task> { 
    const url = `${this.mainUrl}/entity/node`; 
    return this.http.post<Task>(url, task, httpOptions).pipe(
    tap((task: Task) => this.log(`added task w/ id=${task.id}`)), 
    catchError(this.handleError<Task>('addtask')) 
); 
} 

Answer 1

創建任務，但我希望能幫助你。通常情況下，我們有一個界限，服務和組件

//An interface with the structure of the data 
interface IData { 
    prop1:number 
    prop2:string; 
} 

//A service 
@Injectable() 
export class DataService { 

    urlBase:string="....."; 
    constructor(private http: HttpClient) {} 

    getData(): Observable<IData[]> { 
     return this.http.get<IData[]>(urlBase, { params: params }); 
    } 

    postData(data:Idata):Observable<any>{ 
     return this.http.post<IData>(urlBase,data); 
    } 

//Your component 
@Component({ 
    selector: 'app-component', 
    templateUrl: './app-component.html', 
    styleUrls: ['./app-component.css'] 
}) 

export class AppComponent implements OnInit { 
    lista:IData[]; //<--the data we display in our template 
    private subscription: Subscription; //<--a variable to save a subscription 

    constructor(private dataService:DataService){} 
    ngOnInit() 
    { 
     fillData(); //<--cal a function to fill this.lista 

    } 
    fillData() 
    { 
     if (this.subscription) //<--if exist a subscription, remove 
      this.subscription.unsubscribe(); 

     subscription=this.dataService.getData().subscribe((data:IData[])=> 
      {this.lista=data;}); 
    } 

    .... 
    //In your submit 
    submit(form:any) 
    { 
     if (form.isValid) 
     { 
      let data=form.value; //<--normally here transform de data from form 
           //in a object type IData 
      this.dataService.postData(data).subscribe(result:any) 
      { 
       //here you choose 
       this.lista.push(data) //<--you add manually the data 
       //or call fillData() 
       this.fillData(); 
      } 
     } 
    } 
}