Angular 2-错误无法分配给引用或变量答案

【问题标题】：Angular 2- Error Cannot assign to a reference or variableAngular 2-错误无法分配给引用或变量
【发布时间】：2019-06-28 16:56:52
【问题描述】：

我正在使用 Angular 2。我有 2 个嵌套的 ng-template，如下所示：

<ng-template ngFor let-support [ngForOf]="support">
 <div class="row">
    <div class="col-sm-3">
       <div class="form-group form-float">
          <div class="form-line focused">
             <select [ngModelOptions]="{standalone: true}" [(ngModel)]="support.option" class="form-control">
                 <option value="1">1</option>
                 <option value="2">2</option>
                 <option value="3">3</option>
                 <option value="4">4</option>                                   
             </select>
             <label class="form-label">Option</label>
           </div>
         </div>
       </div>
    <div class="col-sm-3">
       <ng-template ngFor let-op3 [ngForOf]="support.option3">
          <select [ngModelOptions]="{standalone: true}" [(ngModel)]="op3" class="form-control">
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
          </select>
          <label class="form-label">Option3</label>
       </ng-template>
    </div>
  </div>
</ng-template>

没有内部ng-template 也能正常工作。有了内部循环，它会引发以下错误：

core.js:1449 ERROR 错误：未捕获（承诺中）：错误：无法分配引用或变量！错误：无法分配给参考或变量！

这是支持模型：

{
"support": [
      {
        "option": "string",
        "option2": "string",
        "option3": ["string"]
      }
   ]
}

【问题讨论】：

我建议您使用ng-container 而不是ng-template 来绑定ngFor 指令。会降低模板中伪代码的复杂度。

标签： angular angular2-ngmodel ng-template

【解决方案1】：

刚刚找到！我不得不将内部绑定更改为：

<ng-template ngFor let-op3 [ngForOf]="support.option3" let-op3Index="index2">
    <div class="row">
         <div class="form-group form-float">
             <div class="form-line focused">
                <select [ngModelOptions]="{standalone: true}" [(ngModel)]="op3[index2]" class="form-control">
                    <option value="xxx">xxx</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                </select>
              <label class="form-label">Option3</label>
            </div>
          </div>
        </div>
      </ng-template>

【讨论】：

【解决方案2】：

我遇到的由我的 ng-template 名称引起的错误
与另一个 ngModel 参数名称相同。

<ng-template #test></ng-template>
<xx [(ngModel)]="test">

更改模板名称有效

【讨论】：