Как я могу использовать раскрывающийся список выбора с выбранным значением с Angular 9

Question

Как я могу использовать раскрывающийся список выбора с выбранным значением с помощью Angular 9.

            <select [required]="egg.value" [(ngModel)]="protein.egg.sizeEgg"
              #eggSize="ngModel" name="eggSize">
              <option [value]="size" disabled>Size</option>
              <option>S</option>
              <option>M</option>
              <option>L</option>
            </select>

в angular 8 он работает правильно, но в angular 9 он вызывает проблемы внутри терминала, как я могу исправить

ошибка терминала

ERROR in src/app/home/home.component.html:67:32 - error TS2339: Property 'size' does not exist on type 'HomeComponent'.

67               <option [value]="size" disabled>Size</option>
                                  ~~~~

  src/app/home/home.component.ts:20:16
    20   templateUrl: './home.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component HomeComponent.
src/app/home/home.component.html:67:32 - error TS2339: Property 'size' does not exist on type 'HomeComponent'.

67               <option [value]="size" disabled>Size</option>
                                  ~~~~

  src/app/home/home.component.ts:20:16
    20   templateUrl: './home.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component HomeComponent.

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

ошибка devtool

home:1 Refused to load the image 'http://localhost:4200/favicon.ico' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.

Пожалуйста, я жду вашей помощи Спасибо: -)

Answer 1

Я добавил два варианта обработки.

Примечание: [value] или [ngValue], когда вы упоминаете строковое значение, проверяя любую переменную внутри компонента. Вы получаете эту ошибку, потому что он проверяет параметры this.size, но его не существует.

Вариант 1 :

<select [(ngModel)]="eggSize"
               name="eggSize">
              <option value="size" disabled>Size</option>
              <option value='S'>S</option>
              <option value='M'>M</option>
              <option value='L'>L</option>
            </select>

Вариант 2 :

<select [(ngModel)]="eggSize"
               name="eggSize2">
<option *ngFor="let size of listSize" [ngValue]="size">
       {{size}}
    </option>
</select>

Вариант 3 :

<select [(ngModel)]="eggSize"
               name="eggSize">
              <option [value]="" disabled>Size</option>
              <option [value]='1'>S</option>
              <option [value]='2'>M</option>
              <option [value]='2'>L</option>
            </select>

https://stackblitz.com/edit/angular-ivy-uq1xjs

Используйте вот так. добавление stackblitz для справки.