如何解决 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 命令在我的第二台机器上重新安装。

在我运行服务之后，没有错误或警告。

Answer 1

你不需要插值 directives.It 只需要 expressions.Here routerLink 是一个指令，因此当你给 {{}} （插值）它是错误的 out.Remove 这些插值并给出一个表达式。

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

How to resolve interpolation error in Angular 7 Project

string-interpolation

angular7