Мат-автозаполнение не заполняет результат

Question

Это HTML

<form>
  <mat-form-field class="container">

    <input type="text" matInput [formControl]="usersForm" [matAutocomplete]="auto" >

    <!-- CREATE AUTO COMPLETE PANEL WITH OPTIONS. -->
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let result of filteredUsers" [value]="result.id">
        {{ result.name }}
      </mat-option>
    </mat-autocomplete>

  </mat-form-field>
</form>

Это класс

export class User {
    constructor(public id: number, public name: string) {}
  }

Это компонент

    export class CertificationComponent implements OnInit {
      filteredUsers: User[] = [];
      usersForm = new FormControl();
      isLoading = false;

      constructor(private fb: FormBuilder, private service: Service) {}


      ngOnInit() {
        this.usersForm.valueChanges.subscribe(
          term => {
            if (term != '') {
              this.service.search(term).subscribe(
                data => {
                  console.log(data);
                  this.filteredUsers = data as any[];
                })
            }
          })
        }


  displayFn(user: User) {
    if (user) { return user.name; }
  }

}

Это услуга.Я создаю фиктивный объект, который я передаю на любом входе, но он не появляется в раскрывающемся списке.Я получаю фиктивные данные пользователей в компоненте, но не в раскрывающемся списке.

@Injectable()
export class CertificationService {

     user : User = {id:1, "name":"abcd"};
     users: User[] = [this.user];

  constructor(private http: HttpClient) {}

  search(name:String): Observable<any> {
    return of(this.users);
  }
}