如何解决 Angular 7 项目中的插值错误

Question

我在我的一台笔记本电脑上开发了 Angular 7 应用程序，它运行良好。但是当我尝试使用另一台笔记本电脑开发它时，它会在浏览器控制台中生成以下错误

Error: Template parse errors:
Parser Error: Got interpolation ({{}}) where expression was expected at column 15 in [[{rechargeId: '{{ item[0] }}'}]] in ng:///AppModule/AppComponent.html@49:88 ("h: 15vw;">

              <a *ngFor="let item of menulist" mat-list-item routerLink="{{ item[3] }}" [ERROR ->][queryParams]="[{rechargeId: '{{ item[0] }}'}]"><mat-icon >dashboard</mat-icon>{{ item[2] }}</a>
    "): ng:///AppModule/AppComponent.html@49:88
Parser Error: Got interpolation ({{}}) where expression was expected at column 15 in [[{rechargeId: '{{ item[0] }}'}]] in ng:///AppModule/AppComponent.html@49:88 ("
          <mat-nav-list style="    min-width: 15vw;">

              [ERROR ->]<a *ngFor="let item of menulist" mat-list-item routerLink="{{ item[3] }}" [queryParams]="[{rechargeId"): ng:///AppModule/AppComponent.html@49:14, Directive RouterLinkWithHref
Parser Error: Got interpolation ({{}}) where expression was expected at column 15 in [[{rechargeId: '{{ item[0] }}'}]] in ng:///AppModule/AppComponent.html@49:88 ("
          <mat-nav-list style="    min-width: 15vw;">

              [ERROR ->]<a *ngFor="let item of menulist" mat-list-item routerLink="{{ item[3] }}" [queryParams]="[{rechargeId"): ng:///AppModule/AppComponent.html@49:14, Directive RouterLinkWithHref
Parser Error: Got interpolation ({{}}) where expression was expected at column 15 in [[{rechargeId: '{{ item[0] }}'}]] in ng:///AppModule/AppComponent.html@49:88 ("
          <mat-nav-list style="    min-width: 15vw;">

              [ERROR ->]<a *ngFor="let item of menulist" mat-list-item routerLink="{{ item[3] }}" [queryParams]="[{rechargeId"): ng:///AppModule/AppComponent.html@49:14, Directive RouterLinkWithHref
Parser Error: Got interpolation ({{}}) where expression was expected at column 15 in [[{rechargeId: '{{ item[0] }}'}]] in ng:///AppModule/AppComponent.html@49:88 ("
          <mat-nav-list style="    min-width: 15vw;">

              [ERROR ->]<a *ngFor="let item of menulist" mat-list-item routerLink="{{ item[3] }}" [queryParams]="[{rechargeId"): ng:///AppModule/AppComponent.html@49:14, Directive MatListItem
Parser Error: Got interpolation ({{}}) where expression was expected at column 15 in [[{rechargeId: '{{ item[0] }}'}]] in ng:///AppModule/AppComponent.html@49:88 ("
          <mat-nav-list style="    min-width: 15vw;">

              [ERROR ->]<a *ngFor="let item of menulist" mat-list-item routerLink="{{ item[3] }}" [queryParams]="[{rechargeId"): ng:///AppModule/AppComponent.html@49:14, Directive MatListItem
Parser Error: Got interpolation ({{}}) where expression was expected at column 15 in [[{rechargeId: '{{ item[0] }}'}]] in ng:///AppModule/AppComponent.html@49:88 (" menulist" mat-list-item routerLink="{{ item[3] }}" [queryParams]="[{rechargeId: '{{ item[0] }}'}]">[ERROR ->]<mat-icon >dashboard</mat-icon>{{ item[2] }}</a>
              
          </mat-nav-list>
"): ng:///AppModule/AppComponent.html@49:136, Directive MatIcon
Parser Error: Got interpolation ({{}}) where expression was expected at column 15 in [[{rechargeId: '{{ item[0] }}'}]] in ng:///AppModule/AppComponent.html@49:88 (" menulist" mat-list-item routerLink="{{ item[3] }}" [queryParams]="[{rechargeId: '{{ item[0] }}'}]">[ERROR ->]<mat-icon >dashboard</mat-icon>{{ item[2] }}</a>
              
          </mat-nav-list>
"): ng:///AppModule/AppComponent.html@49:136, Directive MatIcon
Parser Error: Got interpolation ({{}}) where expression was expected at column 15 in [[{rechargeId: '{{ item[0] }}'}]] in ng:///AppModule/AppComponent.html@49:88 ("Link="{{ item[3] }}" [queryParams]="[{rechargeId: '{{ item[0] }}'}]"><mat-icon >dashboard</mat-icon>[ERROR ->]{{ item[2] }}</a>
              
          </mat-nav-list>
"): ng:///AppModule/AppComponent.html@49:167
Parser Error: Got interpolation ({{}}) where expression was expected at column 15 in [[{rechargeId: '{{ item[0] }}'}]] in ng:///AppModule/AppComponent.html@49:88 ("
    </mat-sidenav>

    [ERROR ->]<mat-sidenav-content style="height:90vh">
      <router-outlet></router-outlet>
    </mat-sidenav-con"): ng:///AppModule/AppComponent.html@54:4, Directive MatSidenavContent
Parser Error: Got interpolation ({{}}) where expression was expected at column 15 in [[{rechargeId: '{{ item[0] }}'}]] in ng:///AppModule/AppComponent.html@49:88 ("
    </mat-sidenav>

    [ERROR ->]<mat-sidenav-content style="height:90vh">
      <router-outlet></router-outlet>
    </mat-sidenav-con"): ng:///AppModule/AppComponent.html@54:4, Directive MatSidenavContent

我首先删除了节点模块，然后使用 npm install 命令在我的第二台机器上重新安装。

在我运行 ng serve 并且没有错误或警告之后。

Answer 1

您不需要指令的插值。它只需要表达式。这里 routerLink 是一个指令，因此当您给出 {{}}（插值）时它会出错。删除这些插值并只给出一个表达式。