Распечатать массив в таблице

Question

У меня есть этот сервис, который используется для получения из точки покоя. Список объектов:

@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);
  }
}

Объект:

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

Компонент:

@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;
        }
    });
  }

Как я могу напечатать содержимое Array<MerchantList>> в таблицу?

Я хотел бы напечатать содержимое массива в каждой строке таблицы.

Answer 1

Вы ищете структурную директиву *ngFor

   <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>