“ArtistItemsComponent”型別上不存在屬性“藝術家”

所以我是 Angular 的新手，并且在 LinkedIn 上學習 Angular5 課程。我正在嘗試創建一個名為 Artist-items 的子組件，并為其創建了 HTML 和 TS 檔案。

好的，很抱歉發布了很多代碼，因為我是新手，我對這里可能出現的問題感到困惑。

我正在嘗試創建一個名為 my-artists 的子組件，其中我向其中添加了 HTML 的一部分，并嘗試將其鏈接到主 HTML，我接受一個名為artist（來自 for 回圈，從 JSON 檔案中獲取資料) 在主組件 HTML 中，其中selector存在子組件的 。

以下是我得到的錯誤：

Error: src/app/artist-items/artist-items.component.html:3:107 - error TS2339: Property 'artist' does not exist on type 'ArtistItemsComponent'.      

3       style="width:70px;" [src]="'./assets/images/'   artist.shortname   '_tn.jpg'" alt="{{ 'Photo of '   artist.name }}">
                                                                                                            ~~~~~~

  src/app/artist-items/artist-items.component.ts:5:16
    5   templateUrl: './artist-items.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component ArtistItemsComponent.

我只發布了錯誤的一部分，因為我遇到了更多相同格式的錯誤，即我的子組件的 HTML 中存在錯誤。我假設在我的主 HTML 中的物件中可能存在錯誤的格式，子組件的選擇器所在的位置。請幫幫我！

主組件（App.Component）TS檔案：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styles: [
    `
      .list-group-item:first-child {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-top: 0;
      }
    `
  ]
})
export class AppComponent implements OnInit {
  query: string;
  artists: any;

  showArtist(e:any,item: any) {
    this.query = item.name;
    item.highlight = !item.highlight;
  }

  constructor( private http: HttpClient ) {
    this.query = '';
  }

  ngOnInit(): void {
    this.http.get<any>('../assets/data.json').subscribe( data => {
      this.artists = data;
    })
  }

}

主要（應用程式組件）HTML：

<div class="list-group">
          <a href="#" class="list-group-item list-group-item-action flex-column align-items-start"
            *ngFor="let artist of artists"
            (click)="showArtist(artist)"
            [style.backgroundColor]="artist.highlight ? '#EEE' : '#FFF'">



            <app-artist-items [artist]="artist" ></app-artist-items> **THIS IS THE SUBCOMPONENT**



          </a><!-- link -->
</div><!-- list-group -->

主要（應用模塊）TS：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {HttpClientModule} from '@angular/common/http';
import { ArtistItemsComponent } from './artist-items/artist-items.component';
@NgModule({
  declarations: [
    AppComponent,
    ArtistItemsComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

藝術家專案組件 TS：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-artist-items',
  templateUrl: './artist-items.component.html',
  inputs: ['artist']
})
export class ArtistItemsComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

藝術家專案組件 HTML：

<div class="media">
    <img class="mr-3 rounded align-self-center img-fluid" 
      style="width:70px;" [src]="'./assets/images/'   artist.shortname   '_tn.jpg'" alt="{{ 'Photo of '   artist.name }}">
    <div class="media-body align-self-center">
      <h5 class="m-0">{{ artist.name }}</h5>
      {{ artist.reknown }}
    </div><!-- media body -->
</div><!-- media -->

uj5u.com熱心網友回復：

錯誤資訊非常清楚。您缺少artistArtistItemsComponent. _

從您的場景中，您將artist物件從AppComponent（父組件）傳遞到ArtistItemsComponent（子組件），您還需要使用@Input()裝飾器進行artist宣告。

import { Input } from '@angular/core';

export class ArtistItemsComponent implements OnInit {
  @Input() artist: any;
}

演示@StackBlitz

標籤：有角度的打字稿角5

上一篇：如何訂閱來自paramMap的兩個不同的observable？

下一篇：如何使用OIDCProvider互動將用戶重定向到特定的自定義登錄頁面