Autocomplete of angular material

How do I adapt the angular autocomplete for my API?

I have this autocomplete component

import { ListComponent } from './../list/list.component';
import { Component, Input } from '@angular/core';
import { FormControl } from '@angular/forms';

import { Observable } from 'rxjs/Observable';
import { startWith } from 'rxjs/operators/startWith';
import { map } from 'rxjs/operators/map';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/operator/map';

@Component({
  selector: 'app-autocomplete',
  templateUrl: './autocomplete.component.html',
  styleUrls: ['./autocomplete.component.css']
})

export class AutocompleteComponent {

  @Input('parentData')  students;

  myControl: FormControl = new FormControl();

  filteredOptions: Observable<string[]>;

  options = [
    {
          aluno:{
          id: 655,
          nome: "Gustavo Henrique",
          status: "Ativo",
          },
          mensalidade:{
          status: "Pago",
          }
    },
      {
          aluno:{
          id: 655,
          nome: "Gustavo Henrique",
          status: "Ativo",
          },
          mensalidade:{
          status: "Pago",
          }
}
  ];

  ngOnInit() {
    this.filteredOptions = this.myControl.valueChanges
    .startWith(null)
    .map(val => val ? this.filter(val) : this.options.slice());

  }

  filter(val: string): string[]
    {
        return this.options.filter(option =>
            option.toLowerCase().indexOf(val.toLowerCase()) === 0);
    }


}

API Response

[ 
    { "aluno": {
           "id": 655,
           "nome": "Gustavo Henrique",
           "status": "Ativo"
               },
      "mensalidade": {
           "status": "Pago"
                   } 
    }
]

Autocomplete HTML

<form class="form">
  <mat-form-field class="style">
      <input matInput placeholder="State" aria-label="State" [matAutocomplete]="auto" [formControl]="stateCtrl">
      <mat-autocomplete #auto="matAutocomplete">
          <mat-option *ngFor="let state of filteredStates | async" [value]="state.name">
              <img style="vertical-align:middle;" aria-hidden src="{{state.flag}}" width="25"/>
              <span>{{ state.name }}</span>
              |
              <small>Population: {{state.population}}</small>
          </mat-option>
      </mat-autocomplete>
  </mat-form-field>
</form>