Angular: @Input does not work with select/mat-select

Question

Hello, I am creating reusable components with angular 8, and I need to exchange parameters between them using the @Input developer, but this does not work when I use native mat-select or select since the options do not appear.

See my code:

Component call:

<i-select data="{{selectData | json}}" label="selectLabel"></i-select>

Component i-select:

@Component({
  // tslint:disable-next-line: component-selector
  selector: 'i-select',
  templateUrl: './select.component.html',
  encapsulation: ViewEncapsulation.None
})
export class SelectComponent implements OnInit {
  @Input() data: any;

  @Input() label: string;

  @Output() event = new EventEmitter();
  constructor() { }

  ngOnInit() {
    if (this.data !== undefined) {
      this.data = JSON.parse(this.data);
    }
  }
}

And my Selectcomponenthtml:

<mat-form-field>
    <mat-label>{{label}}</mat-label>
    <mat-select>
      <mat-option *ngFor="let content of data" [value]="content.chave">
        {{content.value}}
      </mat-option>
    </mat-select>
  </mat-form-field>

What is wrong?