How to display a string array in Angular 6

Question

I'm working on a angular 6 project where in i want to display the key as a label and the values in select option. I have used the below code to generate the output, but it doesn't seem to work. The code used for my previous project worked fine, i want the output to be similar but with angular 6.

code in my component.ts

headerMapper(){      
  this.clientService.getHeaders().subscribe(
    res=>{
      let resSTR = JSON.stringify(res);
      let resJSON = JSON.parse(resSTR);
      let str=resJSON._body;
      this.mapper = Object.keys(JSON.parse(str)).map(arr => {
        return `${arr}: ${JSON.parse(str)[arr].join(', ')}`;
      });
      console.log(this.mapper);
      this.ismapped=false;
    }
  );
}

code in my html

<div>
  <p *ngFor="let element of mapper">{{element | json}}</p>
  <form *ngFor ="let map of mapper">
    <mat-form-field>
      <mat-select placeholder="{{map}}">
        <mat-option>None</mat-option>
        <mat-option *ngFor="let option of map"  [value]="option">{{option}}</mat-option>
      </mat-select>
    </mat-form-field>
  </form>
</div>

code used for my previous project.

<c:forEach var="entry" items="${headerColumns.entrySet()}">
  <div class="input-group pt-2">
    <label class="col-lg-2 col-form-label">${entry.key}</label>
    <div class="col-lg-10">
      <form:select path="${entry.key}" class="form-control col-lg-5">
        <form:option value="-1" label="--- select ---" />
        <form:options items="${entry.value}"></form:options>
      </form:select>
    </div>
  </div>
</c:forEach>