添加内容并立即以真实服务器的角度显示它

Z时代
2024-01-10
分类：问答

我从角度跟随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')) 
); 
}

回答：

创建任务，但我希望能帮助你。通常情况下，我们有一个界限，服务和组件

//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(); 
      } 
     } 
    } 
}