显示angular中的数组数据

Question

i'm trying to learn angular after a long time with react and i want to display data from an array.

I want to use a dropdown menu to select the id and to display the address of the selcted id.

The select code should look like this i guess

<select name="customer" >
  <option *ngFor='let customer of customers'>
    {{ customer.id }}
  </option>
</select>

Here is a array example

export interface Customer {
  id: number,
  companyName: string,
  firstName: string,
  lastName: string,
  street: string,
  streetNumber: number,
  zipCode: number,
  city: string,
  country: string,
}

export const customers = [
  {
    id: 800001,
    companyName: 'example company 1',
    firstName: 'John',
    lastName: 'Doe',
    street: 'Example Street',
    streetNumber: 7,
    zipCode: 11111,
    city: 'example city',
    country: 'example country'
  }
  {
    id: 800002,
    companyName: 'example company 2',
    firstName: 'Jessica',
    lastName: 'Doe',
    street: 'Example Street',
    streetNumber: 8,
    zipCode: 11111,
    city: 'example city',
    country: 'example country'
  }
  {
    id: 800003,
    companyName: 'example company 3',
    firstName: 'Mark',
    lastName: 'Doe',
    street: 'Example Street',
    streetNumber: 69,
    zipCode: 11111,
    city: 'example city',
    country: 'example country'
  }
]

Answer 1

In angular, to use variables in.ts in the.html we use, see the docs :

1. Interpolation, eg

   {{variable}}

2. Binding syntax,eg

   <input [value]="variable">

3. Two way binding,eg

   <input [(ngModel)]="variable">

4. Built-in-directives (*ngFor, *ngIf...),eg

   <div *ngFor="let item of [0,1,2,3]>{{item}}</div>

5. Others object like Reactive Forms

6. ...

I can say the response to your question

<select [(ngModel)]="customer" >
  <option *ngFor='let item of customers' [ngValue]="item">
    {{ customer.id }}
  </option>
</select>
{{customer|json}}

But I recommended, make a tour of heroes to learn how Angular works (You can skip the animations parts -for me the more complex-)