ERROR DOMException：字符串在 Angular 和 Typescript 中包含无效字符

Question

HTML 文件

<div>
    <header>Login Page</header>
    <p><b>{{title}}{{text}}</b></p>
    <button type="button" class="btn btn-info" (click)="onClickMe($event)">Info</button>
    <br>
    <br>
    <rating [rating]="5"></rating>
    <div *ngFor="let catpicture of getPictures">
        <!-- {{catpicture}} -->
        <catpicture [data="catpicture"]></catpicture>
    </div>
</div> 

登录组件文件

import { Component,Input } from '@angular/core';
import { catPicture } from './login.loginname';

@Component({
  selector: 'catpicture',
  templateUrl: './login.component.html',
  styleUrl: './login.component.scss',
  providers: [catPicture]
})

export class LoginComponent {
  title = "My First Angular App";
  text = " World";


  onClickMe($event: any) {
    console.log("Clicked",$event);
  }

  getPictures;
  constructor(catPicture:catPicture){
    this.getPictures=catPicture.getPictures();
  }
  
  // @Input()data:any
}

登录名.ts

export class catPicture{
    getPictures(){
        return [
            {
            imageUrl: "http://loremflickr.com/150/150?random=1",
            pictureName: "Product 1",
            postDate: "May 31, 2018",
            description: "Cras sit amet nibh libero, in gravida...",
            rating:4
            },
            {
                imageUrl: "http://loremflickr.com/150/150?random=2",
                pictureName: "Product 2",
                postDate: "May 31, 2018",
                description: "Cras sit amet nibh libero, in gravida...",
                rating:3
            },
            {
                imageUrl: "http://loremflickr.com/150/150?random=3",
                pictureName: "Product 3",
                postDate: "May 31, 2018",
                description: "Cras sit amet nibh libero, in gravida...",
                rating:3
            },
            {
                imageUrl: "http://loremflickr.com/150/150?random=4",
                pictureName: "Product 4",
                postDate: "May 31, 2018",
                description: "Cras sit amet nibh libero, in gravida...",
                rating:3
            }
        ];
    }
}

catpicture.ts

import { Component, Input } from "@angular/core";
// import { getCatpictures } from './login.canpicture';

@Component({
    selector:'catpicture',
    template:`
    <div class="media">
        <img class="mr-3" src="{{data.imageUrl}}" alt="GeneralPicture">
        <div class="media-body">
            <h5 class="mt-0">Title</h5>
            {{data.postDate}}
            <br>
            {{data.description}}
        </div>
    </div>
    `,
    styles:[`
        .media{
            margin-bottom:20px;
        }
    `]
})

export class catPicture{
    @Input() data: any;
}

模块.ts

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { MovieComponent } from './movie/movie.component';
import { HomeComponent } from './home/home.component';
import { catPicture } from './login/login.loginname';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    MovieComponent,
    HomeComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [catPicture],
  bootstrap: [AppComponent]
})
export class AppModule { }

HTML页面显示如下：

ERROR DOMException：字符串包含无效字符，所以我回去检查 HTML 代码文件，但不幸的是我不知道如何修复这个错误，因为很简单，但我是初学者，有人可以告诉我该怎么做吗？谢谢大家！！

我该怎么办？

Answer 1

在第一个 HTML 文件中，以下行需要更正。

<catpicture [data]="catpicture"></catpicture>