Блог

У меня есть html, который выглядит следующим образом:

 <div *ngFor="let s of project.sections">
    <div class="project-desc-section">
         <h2>{{s.heading}}</h2>
         <div *ngFor="let w of s.work">
             {{w}}
         </div>
    </div>
</div>
  

Объекты моего проекта выглядят следующим образом

 { 
                name: "Project Name",
                id:"bbs",
                isClicked:false,
                description:`Sick app description`,
                sections:[
                            {
                                heading: "Mr header",
                                work:[
                                    '<p>Some cool stuff to talk about</p>',
                                    '<img src="https://www.google.com/logos/doodles/2015/googles-new-logo-5078286822539264.3-hp2x.gif">'
                                    
                                ] 
                            }
                    
                ]
            },
  

И это фактические классы, если кому-то интересно:

 export class Project{

    name:string;
    id:string;
    description:string;
    isClicked:boolean;
    sections:Section[];
    
   
    constructor(id:string,name:string,description:string,isClicked:boolean,sections:Section[]) {
        this.id=id;
        this.name = name;
        this.description = description;
        this.isClicked = isClicked;
        this.sections = sections;
    }
}

export class Section{

    heading:string;
    work:HTMLElement[];
    
    
    constructor(heading:string,work:HTMLElement[]) {
        this.heading = heading;
        this.work = work;
    }
}
  

Ни для кого не сюрприз, angular не компилирует HTML, он просто интерполирует их как строки:

Итак, есть ли какой-либо способ заставить angular скомпилировать HTML? Я знаю, что это не «угловой способ», но это мой личный веб-сайт, поэтому я беру на себя полную свободу действий. Я также согласен, если вы считаете, что способ, которым я структурировал это, был плохим выбором дизайна, но я уже слишком далеко зашел в эту кроличью нору!

Вы можете использовать для этого innerHTML свойства.

Пример:

 <div [innerHTML]="yourVariable"></div>