Angular 13 - 数据可在组件内部访问,但未显示在 html 页面上

分享于2022年07月17日 angular node.js 问答
【问题标题】:Angular 13 - 数据可在组件内部访问,但未显示在 html 页面上(Angular 13 - Data is accessible inside component, but does not show on the html page)
【发布时间】:2022-01-24 06:26:44
【问题描述】:

所以,我现在正在学习 Angular,并尝试做一个 CRUD 应用程序。几乎一切正常,除了尝试使用 ID 获取数据时,我可以访问 component.ts 文件中的所有数据,但同样不会呈现到 html 文件中。这是我尝试过的:-

edit-to.component.ts

export class EditTodoComponent implements OnInit {

private tid: number = 0;

  public Todo:TodoModel= null ;
  public desc:string='';
  public title:string='';
  public id:number;

  constructor(private route: ActivatedRoute, private http:HttpClient) { }

  ngOnInit(): void {
    this.route.paramMap.subscribe(all_params =>{
      this.tid = parseInt(all_params.get('id'))
      //console.log( all_params.get('id'))
      //console.log( this.tid );
    });

    this.getTodoFromId(this.tid)


  }

   getTodoFromId(id){
    //console.log("id="+id)
     this.http.get<{data: any}>('http://localhost:3000/api/todos/get_todo_from_id/'+id).subscribe((data) =>{
      console.log("response in angular= \n");
      this.Todo = data[0]
      

      console.log(this.Todo.todo_title) //-> This one works

}
editOnSubmit(form:NgForm){
  //something here
}

edit-todo.component.html

 
//-> This one does not work.

分离出来,

来自 edit-to.component.ts :-

console.log(this.Todo.todo_title) 有效

但来自 edit-todo.component.html

<input type="text" class="form-control" id="todo_title" [(ngModel)]="title" name="title" value="{{ Todo.todo_title}}"> 不起作用


【解决方案1】:

定义一个 BehaviorSubject 类型的属性。

isAvailableData = new BehaviorSubject(true);

然后你订阅数据的地方设置为true。

getTodoFromId(id){
//console.log("id="+id)
 this.http.get<{data: any}>('http://localhost:3000/api/todos/get_todo_from_id/'+id).subscribe((data) =>{
  console.log("response in angular= \n");
  this.Todo = data[0];

  this.isAvailableData.next(true);

  console.log(this.Todo.todo_title) //-> This one works

}

然后在你的 HTML 中添加 ngIf 到 col-md-12 div:

//-> This one does not work.

另外,您在表单中犯了错误,输入应如下所示:

而且没有必要为 id、title、...定义一个属性 这些是 todo 对象的属性

 

  

  • 我正在尝试不使用 Rxjs。
  • 最佳实践是使用 Rxjs。你也可以使用布尔类型 public isAvailableData: boolean;
  • 并将 ngIf 更改为:*ngIf="isAvailable"