typescript - Angular 6 Försöker iterera över en array av objekt

Jag försöker iterera över en array av objekt i en av mina komponenter i ngOnInit:

@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(); // Copy of Contacts

  constructor(private contactService: ContactService) {}

  ngOnInit() {
    this.contacts = this.contactService.getContacts();
    console.log(this.contacts); 
    console.log(typeof(this.contacts)); // object
    for(let contact of this.contacts) {
      console.log(contact); // Does not return anything
    }
  }

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

}

Så småningom vill jag lägga till en egenskap till varje objekt i denna array, men jag sitter fast på att bara försöka göra något för att få det att fungera med den.

Jag tror inte att getContacts() är ett observerbart eftersom jag redan har prenumererat på HTTP-förfrågan och skapat min array av kontaktobjekt från datan.

Här är vad som finns i contact.service.ts:

@Injectable()
export class ContactService {
  private contact: Contact;
  private contacts: Contact[] = [];

  activeContact = new EventEmitter<Contact>();

  constructor(private http: Http) {
    this.onGetContactsFromServer() // Subscribe to the getContacts operator
      .subscribe(
        (response) => this.mapContacts(response),
        (error) => console.log(error)
      );
  }

  getContacts() {
    return this.contacts;
  }

  mapContacts(response) {
    // Map the getContacts response to a Contact[]
    for ( let c of response ) {
      this.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(this.contact);
    }
  }

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

Svar #1

Du behöver prenumerera på det observerbara för att iterera.

ngOnInit() {
  this.contactService.getContacts().subscribe(contacts => {
    this.contacts = contacts;
    console.log(this.contacts);
  });
}

MEN det verkar som att du precis lär dig Angular, jag föreslår att du prenumererar så lite som möjligt och försöker använda async-pipe istället. Det finns mycket material om det på nätet.

Relaterade artiklar