为什么 {{ list.title }} 没有显示

Question

我正在关注 youtube 上的教程来构建我的第一个 MEAN 堆栈应用程序，但列表的标题未显示。我正在使用 Insomnia 来制作列表。 这是我在 Node 和 express 后端的代码：

const express = require('express');
const app = express();
const mongoose = require('./database/mongoose');

const List = require('./database/models/list');
const Task = require('./database/models/task');
app.use(express.json());

app.use((req, res, next)=>{
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Methods", "GET, POST, HEAD, OPTIONS, PUT, PATCH, DELETE");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
})




app.get('/lists', (req, res) => {
  List.find({})
  .then(lists => res.send(lists))
  .catch((error) => console.log(error));
});

app.post('/lists', (req, res)=>{
 ( new List({ 'title': req.body.title }))
   .save()
   .then((list) => res.send(list))
   .catch((error) => console.log(error));
});

app.get('/lists/:listId', (req,res) => {
  List.find({ _id:req.params.listId})
  .then((list) => res.send(list))
   .catch((error) => console.log(error));
});

app.patch('/lists/:listId', (req,res) => {
  List.findOneAndUpdate({ '_id': req.params.listId}, {$set:req.body})
  .then((list) => res.send(list))
   .catch((error) => console.log(error));
})

app.delete('/lists/:listId', (req,res) => {
  const deleteTasks = (list)=> {
    Task.deleteMany({ _listId:list._id})
    .then(() => list)
    .catch((error) => console.log(error));
  };
  List.findByIdAndDelete({ _id: req.params.listId})
               .then((list) => res.send(deleteTasks(list)))
              .catch((error) => console.log(error));

})
/* Tasks*/

app.get('/lists/:listId/tasks', (req,res) => {
  Task.find({ _listId: req.params.listId})
  .then((tasks) => res.send(tasks))
   .catch((error) => console.log(error));
});

app.post('/lists/:listId/tasks', (req, res)=>{
  ( new Task({ '_listId': req.params.listId , 'title': req.body.title}))
    .save()
    .then((tasks) => res.send(tasks))
    .catch((error) => console.log(error));
 });

 app.get('/lists/:listId/tasks/:taskId', (req,res) => {
  Task.findOne({ _listId: req.params.listId, _id:req.params.taskId})
  .then((task) => res.send(task))
   .catch((error) => console.log(error));
});

app.patch('/lists/:listId/tasks/:taskId', (req,res) => {
  Task.findOneAndUpdate({ _listId: req.params.listId, _id:req.params.taskId}, {$set:req.body})
  .then((task) => res.send(task))
   .catch((error) => console.log(error));
})

app.delete('/lists/:listId/tasks/:taskId', (req,res) => {
  Task.findByIdAndDelete({ _listId: req.params.listId, _id:req.params.taskId})
  .then((task) => res.send(task))
   .catch((error) => console.log(error));
})

app.listen(3000, () => console.log("Server Connected on Port 3000"));

角度服务文件是：

import { Injectable } from '@angular/core';
import{ WebService} from './web.service';
import Task from './models/task';
@Injectable({
  providedIn: 'root'
})
export class TaskService {

  constructor(private webService: WebService) { }

  getLists(){
    return this.webService.get('lists');
  }
  createLists(title:string){
  return this.webService.post('lists', {title})
  }
  getTasks(listId: string){
    return this.webService.get('lists/${listId}/tasks');
  }
  createTasks(listId: string, title:string){
  return this.webService.post('lists/${listId}/tasks', {title})
  }
  deleteLists(listId: string){
    return this.webService.delete('lists/${listId}')
  }
  deleteTasks(listId: string){
    return this.webService.delete('lists/${listId}/tasks/${taskId}')
  }
  setCompleted(listId: string, task: Task){
    return this.webService.patch('lists/${listId}/tasks/${task._id}', {completed: !task.completed})
  }
}

和

import { Injectable } from '@angular/core';
import{HttpClient} from "@angular/common/http";
@Injectable({
  providedIn: 'root'
})
export class WebService {
readonly ROOT_URL;
  constructor(private http: HttpClient) {
    this.ROOT_URL = "http//localhost:3000";
   }

   get(uri: string){
     return this.http.get('${this.ROOT_URL}/${uri}');
   }

   post(uri: string, payload: Object){
    return this.http.post('${this.ROOT_URL}/${uri}', payload);
  }

  patch(uri: string, payload: Object){
    return this.http.patch('${this.ROOT_URL}/${uri}', payload);
  }

  delete(uri: string){
    return this.http.delete('${this.ROOT_URL}/${uri}');
  }

}

最后是 HTML 文件

<div class= "centered-content">
  <div class= "task-manager-container">
    <div class= "sidebar">
      <h1 class= "title has-text-primary">Lists
      </h1>
      <div class= "list-menu">
       <a href="#" class="list-menu-item " *ngFor="let list of lists">
         <p class="white-text">
          {{ list.title }}
           <span class="pull-right task-delete btn-rounded-corners">X</span>
         </p>
       </a>
      </div>
      <button class="btn btn-primary btn-rounded-corners">Add Lists</button>
    </div>
  <div class="task-list-container">
    <h1 class= "title has-text-primary">Tasks</h1>
    <div class="task complete">
      <p class="white-text">
        Task
        <span class="pull-right task-delete btn-rounded-corners">X</span>
      </p>
    </div>
  </div>
  </div>
</div>

这里是task-view.component.ts文件

import { Component, OnInit } from '@angular/core';
import List from 'src/app/models/list';
import Task from 'src/app/models/task';
import { TaskService } from 'src/app/task.service';

@Component({
  selector: 'app-task-view',
  templateUrl: './task-view.component.html',
  styleUrls: ['./task-view.component.scss']
})
export class TaskViewComponent implements OnInit {
  lists: List[]= [];
  task: Task[]= [];
  constructor(private taskService: TaskService) { }

  ngOnInit()  {
    this.taskService.getLists().subscribe((lists: List[]) => this.lists = lists);
  }

}

它可能是不推荐使用的语法或 API 中缺少的部分。

Answer 1

在您的TaskService 和WebService 文件中，您使用了单引号(')。 将其替换为反引号 (`)。

我在下面给出一个例子：

你用过：

this.http.get('${this.ROOT_URL}/${uri}')

应该是：

this.http.get(`${this.ROOT_URL}/${uri}`)

Learn more about Template literals here