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.

לבני מלכה · Accepted Answer · 2018-11-28 11:29:43Z

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>

edited Nov 28, 2018 at 11:29

לבני מלכה

16.3k2 gold badges26 silver badges48 bronze badges

answered Nov 28, 2018 at 11:27

amd

21.7k6 gold badges54 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Print Array in Table

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related