大家好，
我在angular 12项目中遇到了一个问题:
我想显示一个名为todos的数组，其中包含我所有的对象变量。然而，即使我可以在控制台上看到我的对象被添加到数组:todos，似乎有一个问题(与我的观察对象可能)，因为它们没有显示在html页面上。
我有两个组件"add-todo"one_answers";todos"以及1个服务"todoService"
下面是我的代码://todo.service.ts :
import { Injectable } from '@angular/core';
import {Todo} from '../models/todo.model';
import {Subject} from "rxjs"
@Injectable({
providedIn: 'root'
})
export class TodoService {
todos:Todo[]=[];
todoSubject=new Subject <Todo[]>()
constructor() {
setTimeout(()=>{
this.todos=[
{
firstname:"Youssef"
},
{
firstname:"Yacine"
},
{
firstname:"Ismail"
},
];
this.emitTodo();
},3000)
}
addTodo(todo:Todo):void{
this.todos.push(todo);
this.emitTodo();
console.log("Dans todoservice :"+this.todos);
}
emitTodo():void{
this.todoSubject.next(this.todos);
}
}
//todos.component.ts :
import { Component,OnInit,OnDestroy } from '@angular/core';
import {TodoService} from '../services/todo.service';
import {Todo} from '../models/todo.model';
import {Subscription} from 'rxjs'
@Component({
selector: 'app-todo',
templateUrl: './todo.component.html',
styleUrls: ['./todo.component.css']
})
export class TodoComponent implements OnInit, OnDestroy {
todos;
todoSub;
constructor(private todoService:TodoService){}
ngOnInit():void{
this.todoSub=this.todoService.todoSubject.subscribe(
(value:Todo[])=>{
this.todos=value;
console.log("Dans todo value :"+value);
},
(error)=>{
console.log("Erreur "+error)
},
()=>{
console.log("Observable complete");
}
)
}
ngOnDestroy():void{
this.todoSub.unsubscribe();
}
}
//todos.component.html :
<div class="form-group" *ngFor="let todo of todos;">
{{todo|json}}
</div>
<p>todo works!</p>
//and finally,
//add-todo.component.ts :
import { Component, OnInit } from '@angular/core';
import { Todo } from '../models/todo.model';
import {TodoService} from '../services/todo.service';
import {Router} from '@angular/router';
@Component({
selector: 'app-app-todo',
templateUrl: './app-todo.component.html',
styleUrls: ['./app-todo.component.css']
})
export class AppTodoComponent implements OnInit {
todo=new Todo();
constructor(private todoService:TodoService, private router:Router) { }
ngOnInit(): void {
}
onSubmit():void{
this.todoService.addTodo(this.todo);
console.log("Dans add-todo :"+this.todo);
this.router.navigate(["todos"]);
}
}
add-todo.component.html :
<p>{{todo|json}}</p>
<form #addTodoForm="ngForm" (ngSubmit)="onSubmit()">
<label for="name">Firstname :</label>
<input type="text" name="firstname" [(ngModel)]="todo.firstname" required>
<button type="submit" class="btn btn-success" [disabled]="addTodoForm.invalid">Add Todo</button>
</form>```
This is what it shows when I "ng serve" the code :
[![todos.component.html][1]][1]
Then I add a new todo :
[![add-todo.component.html][2]][2]
Then it redirects to the todos.component.html again but it doesn't display all the todos like before :
[![todos.component.html][3]][3]
[1]: https://i.stack.imgur.com/5P1NQ.png
[2]: https://i.stack.imgur.com/diIDX.png
[3]: https://i.stack.imgur.com/PgKxE.png
我认为你需要在Angular(或任何库或框架)中不可变地更改数组和对象，以便进行更改检测。
对象和数组都是引用类型，所以它们存储自己的内存位置，对它们执行push操作不会改变它们的内存位置。
每次你想要改变Angular中的数组和对象时，都要做不可变的(赋新值，这样内存中的位置就会改变，并且会进行更改检测)。maps可能不需要，但我已经添加了它们，所以数组中的对象在内存中也有新的位置。
addTodo(todo:Todo):void{
// this.todos.push(todo);
this.todos = [...this.todos.map(todo => ({ ...todo })), todo];
this.emitTodo();
console.log("Dans todoservice :"+this.todos);
}
emitTodo():void{
this.todoSubject.next([...this.todos.map(todo => ({ ...todo })]);
}
您将todos:Todo存储在服务类中。然后尝试通过将该服务注入组件来访问组件中的todos。
constructor(private todoService:TodoService){}
这是行不通的。请了解依赖注入是如何工作的。
可能的解决方案,
- 您可以将数据存储在本地存储或会话存储中，以便在不同的组件中访问它们
- 可以使用类似Ngrx的数据存储技术(推荐大规模应用)
- 将数据存储在本地文件中(不建议用于大规模应用程序)