Angular 6组件中遍历对象数组无输出，无法操作数组对象

你遇到的问题核心是异步操作的时机不匹配。虽然控制台里console.log(this.contacts)能看到内容，但那是浏览器控制台的特殊特性：当你打印引用类型（比如数组）时，控制台会显示它最终的状态，而非调用console.log那一刻的真实状态。实际上，当ngOnInit里执行for...of循环时，this.contacts还是空数组——因为HTTP请求还没完成，数据还没被填充进去。

为什么会出现这个问题？ #

你的ContactService在构造函数里发起了HTTP请求并订阅，但HTTP请求是异步的：它不会阻塞代码执行，组件的ngOnInit会在HTTP请求返回之前就执行完毕。这时getContacts()返回的this.contacts还是初始的空数组[]，循环自然没有输出。等后续HTTP请求完成、mapContacts把数据push到数组后，控制台的数组显示才会更新，但循环早已经执行过了。

修复方案 #

第一步：修改ContactService，让数据获取逻辑更可控

我们调整Service，让getContacts返回Observable，把订阅的控制权交给组件，确保组件能在数据就绪后再处理：

@Injectable()
export class ContactService {
  private contacts: Contact[] = [];
  activeContact = new EventEmitter<Contact>();

  constructor(private http: Http) {}

  // 改为返回Observable，让组件决定何时处理数据
  getContacts(): Observable<Contact[]> {
    // 如果已经缓存了数据，直接返回
    if (this.contacts.length > 0) {
      return of(this.contacts);
    }
    // 否则发起请求并处理数据
    return this.onGetContactsFromServer().pipe(
      tap(response => this.mapContacts(response)), // 缓存数据
      map(() => this.contacts) // 返回处理后的数组
    );
  }

  private mapContacts(response) {
    this.contacts = []; // 先清空避免重复添加
    for (let c of response) {
      const contact = new Contact(
        +c.id, +c.account_id, c.title, c.first_name, c.last_name,
        c.email, c.phone_number, c.address, c.city, c.country,
        c.postal_code, c.created, c.modified
      );
      this.contacts.push(contact);
    }
  }

  private onGetContactsFromServer() {
    return this.http.get('http://127.0.0.1:8000/app-contacts.json')
      .pipe(
        map((response: Response) => response.json()),
        catchError((error: Response) => throwError(error))
      );
  }
}

第二步：修改组件，在数据就绪后执行遍历

调整ngOnInit，订阅getContacts()的返回值，确保在数据真正返回后再执行遍历和属性添加操作：

@Component({ 
  selector: 'app-contact-list', 
  templateUrl: './contact-list.component.html', 
  styleUrls: ['./contact-list.component.css'] 
}) 
export class ContactListComponent implements OnInit { 
  contacts: Contact[] = []; 
  filteredContacts = this.contacts.slice(); 

  constructor(private contactService: ContactService) {} 

  ngOnInit() {
    this.contactService.getContacts().subscribe(contacts => {
      this.contacts = contacts;
      this.filteredContacts = [...this.contacts]; // 复制数组

      // 现在可以正常遍历并添加属性了
      for(let contact of this.contacts) {
        console.log(contact);
        // 示例：添加自定义属性
        contact.isSelected = false;
      }
    });
  } 

  filterContacts = (contacts) => { 
    this.filteredContacts = contacts; 
  } 
}

额外说明 #

这种修改方式更符合Angular的最佳实践：Service负责封装数据获取逻辑并提供数据流，组件负责订阅数据流、处理数据和更新UI。同时也避免了异步操作时机不匹配导致的问题，确保你能在数据就绪后顺利完成遍历和属性添加的需求。

内容的提问来源于stack exchange，提问作者rossarian