Как отобразить и привязать выпадающие элементы в Angular 6?

Question

У меня есть выпадающий список, который имеет опцию типа testOptions .

я получаю данные из сервиса для этих опций на Map, например «Y» для «Да», «N» для «Нет» и «U» для неподтвержденных в свойстве optionTest .

    import { Component, OnInit, createPlatformFactory } from '@angular/core';


    @Component({
    selector: 'app-test-information',
    templateUrl: './app-test-information.component.html',
    styleUrls: ['./app-test-information.component.scss']
    })
    export class TestInfoComponent implements OnInit {

    Id :Items;
    public testOptions: Items[] = [
    {
    id: 1,
    name: 'NA',
    },

    {
    id: 2,
    name: 'Yes',
    },

    {
    id: 3,
    name: 'No',
    },

    {
    id: 4,
    name: 'Unconfirmed'
    }
    ];

    ngOnInit() {

    this.infoService.getData()
    .subscribe((result :InfoResults ) => this.data = result
    , undefined,
    () => {
    if (this.data) {
    this.readOnlyData()

    }

    })


    readOnlyData() {
 //here i am trying to find item in testOptions and bind the data from service
    this.Id=this.testOptions.find((item) => item.name === "Yes" ) ;

    }
    }


  <!-- Model class for items : -->

    export class Items {
    public id ?: number;
    public name : string;
    } 

  export class InfoResults {
  public optionTest : string;
  }

как мы можем отобразить или получить this.id, если параметры от службы поступают в данных, таких как «Y» для Да, «N» для «Нет» и «U» для неподтвержденных?

Пожалуйста, помогите.

Спасибо!