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 tasks函数，调用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

我没有使用英雄之旅的例子，但我希望可以帮到你。我们通常有一个界面，一个服务和一个组件

app.use(sassMiddleware({
    src: path.join(__dirname, 'scss'),
    dest: path.join(__dirname, 'public'),
    debug: true,
    outputStyle: 'compressed',
    prefix:  '/stylesheets'
}));

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

1 个答案: