Question

您好我过去几天一直在努力学习Angular，我想使用ngHtmlBind或ngInclude指令。但是，当我使用它并提供我的应用程序时，控制台会说：

未捕获错误：模板解析错误：
  无法绑定到'ngBindHtml'，因为它不是'div'的已知属性。

未捕获错误：模板解析错误：
  无法绑定到'ngInclude'，因为它不是'div'的已知属性。

我在阅读文档时感到茫然。也许是因为我使用CLI并且指令被不同地调用（即代替'ng-for'，它被实现为* ngFor）？

我尝试过ngFor和ngIf并且它们正常工作。但是当我使用ngBindHtml和ngInclude时，会出现错误。

这是我的代码：

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { SonglistComponent } from './songlist/songlist.component';
import { ChartComponent } from './chart/chart.component';

import { DataService } from './data.service';
import { SafePipe } from './safe.pipe';

@NgModule({
  declarations: [
    AppComponent,
    SonglistComponent,
    ChartComponent,
    SafePipe
  ],
  imports: [
    BrowserModule
  ],
  providers: [DataService],
  bootstrap: [AppComponent]
})
export class AppModule { }

chart.component.html

<div class="chart" *ngFor="let song of dataService.currentPlaylist">
    <div class="chart-options">
        <span class="glyphicon glyphicon-remove" aria-hidden="true" (click)="closeChart()"></span>
    </div>
    <h1 class="chart-title">{{song.title}}</h1>
    <p class="chart-artist">by {{song.artist}}</p>
    <p class="chart-key">Key: {{song.key}}</p>
    <div class="chart-body" *ngBindHtml="song.chart">
    </div>
</div>

Answer 1

angular 中没有内置指令ngBindHtml。它来自 angularjs

您应该使用innerHTML属性：

<div class="chart-body" [innerHTML]="song.chart"></div>

有关详细信息，请参阅 angular 文档的模板语法部分（同样，请参阅 angularjs ）： https://angular.io/guide/template-syntax

Angular：ngInclude和ngBindHtml不是div的已知属性

1 个答案: