Print Array in Table

Question

I have this service which is used to get from rest point List of Objects:

@Injectable({
  providedIn: 'root'
})
export class MerchantService {

  constructor(private http: HttpClient) {
  }    

  getMerchantsList(): Observable<Array<MerchantList>> {
    return this.http.get<Array<MerchantList>>(environment.api.urls.merchants.getMerchants);
  }
}

Object:

export class Merchant {
  constructor(
    public id: string,
    public name: string,
    public state_raw: string,
    public users: string,
  ) {}
}

Component:

@Component({
  selector: 'app-contract',
  templateUrl: './contract.component.html',
  styleUrls: ['./contract.component.scss']
})
export class ContractComponent implements OnInit {

  merchants: MerchantList[];

  constructor(private merchantService: MerchantService,
              private route: ActivatedRoute) {
  }

  ngOnInit() {

    this.merchantService.getMerchantsList()
     .subscribe(value => {
        if (value != null) {
          this.merchants = value;
        }
    });
  }

How I can print the content of the Array<MerchantList>> into table?

I would like to print the Array content into each table row.

Answer 1

You are looking for the *ngFor structural directive

   <table>
    <tr>
      th>Id</th>
      <th>Name</th>
    </tr>
    <tr *ngFor="let row of merchants">
      <td>{{row.id}}</td>
      <td>{{row.name}}</td>
    </tr>
   </table>