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

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

没有内置指令ngBindHtml的角度.它来自angularjs

您应该使用innerHTML属性:

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

有关更多信息,请参阅角度文档的模板语法部分(同样,不是angularjs):https: //angular.io/guide/template-syntax