html - 我如何在 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>

在角度 8 中它工作正常但在角度 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/ **

开发工具错误

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 以供引用。