Angular EventEmitter 不发出数组的任何变化

Question

这是我的代码：

notes.service.ts

      private notes: Array<Note> = [];
      notesChanged = new EventEmitter<Note[]>();
     
      getNotes() {
        this.getData();
        console.log('getNotes()', this.notes);
        return this.notes;
      }

      getData() {
         this.http.get<Note[]>(this.url).subscribe(
            (data) => {
                 this.notes = data;
                 this.notesChanged.emit(this.notes);
            }
         );
      }

notes.component.ts

      notes: Array<Note> = [];
 
      ngOnInit(): void {
          this.notes = this.notesData.getNotes();
          this.notesData.notesChanged.subscribe(
              (notes: Note[]) => this.notes = notes
          );
      }

notes.component.html

<div *ngFor="let item of notes" class="col-md-4">
   <a [routerLink]="['/note', item.id]" class="note-link">
      <div class="note-body text-center">
          <h4>{{item.title}}</h4>
          <p>{{item.text}}</p>
      </div>
   </a>
</div>

笔记在浏览器中加载后不显示，只有当我离开然后返回笔记时才会显示。

console.log('getNotes()', this.notes);显示在浏览器中加载后数组为空。

Answer 1

console.log('getNotes()', this.notes);在对 api 的 getData 调用获取结果之前触发。这就是为什么您在页面加载时的日志中看不到任何内容的原因。

你能显示 notes.component.html 吗？

Answer 2

问题出在 getNotes() 方法上。它通过调用 getData() 发送异步请求，不等待结果并且可以 return 一个空列表（如果它没有时间完成）或来自服务器的数据（你有时通过浏览查看）。订阅后getData()returnnotesreturn

Angular EventEmitter 不发出数组的任何变化

Angular EventEmitter does not emit any changes of an array

server-communication

typescript

angular

angular-event-emitter