Angular 用于禁用按钮的模板变量抛出编译错误

Question

我正在尝试使用 Angular 模板变量将值传递给调用后端的按钮。当我编译下面的代码时，出现错误。为什么 angular 模板会抛出错误？我在这里使用了文档中的示例：https://angular.io/guide/template-reference-variables

我认为可能是因为：

The structural directive, *ngFor instantiates the template twice because *ngFor iterates over the two items in the array. It is impossible to define what the ref.value reference signifies.

但是我不明白...。所选选项不会是实例化的选项吗？如果它没有被实例化，它会不会是未定义的？

ERROR in src/app/statusview/statusview.component.html:84:96 - error TS2339: Property 'endo' does not exist on type 'StatusviewComponent'.

84                         <button mat-raised-button color="primary" (click)="ReloadOdataEndpoint(endo.value)"

代码

                <select>
                    <option *ngFor="let t of selectedCustomer.endpoints" #endo [ngValue]="t.name">
                        {{t.name}}
                    </option>
                </select>
                <button mat-raised-button color="primary" (click)="ReloadEndpoint(endo.value)"
                    disabled="!endo" style="margin: 5px;">
                    Load Endpoint
                </button>

注意： None 这些变量在模板中声明 - 我试图在 html 中设置它们并将它们传递到模板中

Answer 1

您不能引用一个选项元素，您将对多个元素有一个引用。将其放在 select 上并选择值。

<select #endo>
  <option *ngFor="let t of selectedCustomer.endpoints" [ngValue]="t.name">
   {{t.name}}
  </option>
</select>
<button mat-raised-button color="primary" (click)="ReloadEndpoint(endo.value)" disabled="!endo" style="margin: 5px;">
 Load Endpoint
</button>

Angular 用于禁用按钮的模板变量抛出编译错误

Angular template variable used to disable button throws compile error

angular-template

angular