Angular2 RC5: Không thể liên kết với 'Thuộc tính X' vì nó không phải là thuộc tính đã biết của 'Thành phần con'

84

Tôi có một dự án Angular2 nhỏ dựa trên dự án Angular2 Seed mà tôi đang cố gắng nâng cấp lên Angular2 RC5.

Dự án của tôi có một vài tính năng, một trong số chúng được gọi là home. Thành phần nhà sử dụng một thành phần con được gọi là create-report-card-form. Tôi đã khai báo cả home và create-report-card-formcác thành phần trong home.module(xem mã bên dưới) và gặp lỗi này :

Từ chối Promise chưa được xử lý: Lỗi phân tích cú pháp mẫu: Không thể liên kết với 'currentReportCardCount' vì nó không phải là thuộc tính đã biết của 'create-report-card-form'.

  1. Nếu 'create-report-card-form' là một thành phần Angular và nó có đầu vào 'currentReportCardCount', thì hãy xác minh rằng nó là một phần của mô-đun này.

Cấu trúc dự án

-app
    - app.module.ts
    - app.component.ts
    - +home
        - home.module.ts 
        - home.component.ts
        - home.component.html
        - create-report-card-form.component.ts
        - create-report-card-form.component.html
    - +<other "features">
    - shared
        - shared.module.ts

home.module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {ReactiveFormsModule} from '@angular/forms';

import { SharedModule } from '../shared/shared.module';
import { DataService } from '../shared/services/index';
import { HomeComponent } from './home.component';
import { CreateReportCardFormComponent } from './create-report-card-form.component';

@NgModule({
    imports: [CommonModule, SharedModule, ReactiveFormsModule],
    declarations: [HomeComponent, CreateReportCardFormComponent],
    exports: [HomeComponent, CreateReportCardFormComponent],
    providers: [DataService]
})

export class HomeModule { }

app.module

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { APP_BASE_HREF } from '@angular/common';
import { RouterModule } from '@angular/router';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { routes } from './app.routes';

import { AboutModule } from './+about/about.module';
import { HomeModule } from './+home/home.module';
import {TestModule} from './+test/test.module';
import {VoteDataEntryModule} from './+vote-data-entry/vote-data-entry.module';
import { SharedModule } from './shared/shared.module';

@NgModule({
  imports: [BrowserModule, HttpModule, RouterModule.forRoot(routes), AboutModule, HomeModule,
    TestModule, VoteDataEntryModule, SharedModule.forRoot()],
  declarations: [AppComponent],
  providers: [{
    provide: APP_BASE_HREF,
    useValue: '<%= APP_BASE %>'
  }],
  bootstrap: [AppComponent]

})

export class AppModule { }

create-report-card-form.component.ts

import { Component, Input, Output, EventEmitter, OnInit} from '@angular/core';
import { FormBuilder, FormGroup, FormControl } from '@angular/forms';
// import { Dialog, Dropdown, SelectItem, Header, Footer, Messages, Message } from 'primeng/primeng';
import { SelectItem, Message } from 'primeng/primeng';

import {ReportCard, ReportCardDataSource} from '../shared/index';
import {CREATE_REPORT_CARD_FORM_HEADING, EDIT_REPORT_CARD_FORM_HEADING} from './constants';

@Component({
    moduleId: module.id,
    selector: 'create-report-card-form',
    templateUrl: 'create-report-card-form.component.html'
})
export class CreateReportCardFormComponent implements OnInit {

    @Input() public reportCardDataSourcesItems: SelectItem[];
    @Input() public reportCardYearItems: SelectItem[];
    @Input() errorMessages: Message[];

    @Output() reportCardCreated = new EventEmitter<ReportCard>();
    @Output() editReportCardFormValueChanged = new EventEmitter<ReportCard>();

    public editReportCardForm: FormGroup;
    private selectedReportCardDataSourceIdControl: FormControl;
    private selectedReportCardYearControl: FormControl;

    // TODO: remove this hack for resetting the angular 2 form once a real solution is available (supposedly in RC5)
    private isFormActive: boolean = true;
    private formHeaderString: string = CREATE_REPORT_CARD_FORM_HEADING;
    private formDialogVisible: boolean = false;
    private isCreatingNewReportCard = false;  // false implies that we are updating an existing report card

    constructor(private fb: FormBuilder) {
    }

    configureForm(selectedReportCard: ReportCard, createNewReport: boolean) {
        this.isCreatingNewReportCard = createNewReport;

        this.resetForm();

        this.selectedReportCardDataSourceIdControl.updateValue(selectedReportCard.reportCardDataSource.reportCardSourceId);

        this.selectedReportCardYearControl.updateValue(selectedReportCard.reportCardYear);

        if (createNewReport) {
            this.formHeaderString = CREATE_REPORT_CARD_FORM_HEADING;
        } else {
            // updating an existing report card
            this.formHeaderString = EDIT_REPORT_CARD_FORM_HEADING +
                selectedReportCard.reportCardYear + ' ' + selectedReportCard.reportCardDataSource.reportCardSourceName;
        }

        this.editReportCardForm.valueChanges.subscribe(data => this.onFormValueChanged(data));
    }

    customGroupValidator(reportCardDataSourceIdControl: FormControl, reportCardYearControl: FormControl,
        isCreatingNewReportCard: boolean) {
        return (group: FormGroup): { [key: string]: any } => {

            // missing data error ...
            if (!reportCardDataSourceIdControl.value || !reportCardYearControl.value) {
                return { 'requiredDataError': 'Report card year AND provider must be selected.' };
            }

            // invalid data error ...
            if (isCreatingNewReportCard) {
                if (!reportCardDataSourceIdControl.touched || !reportCardYearControl.touched) {
                    return { 'requiredDataError': 'Report card year AND provider must be selected.' };
                }
            } else {
                if (!reportCardDataSourceIdControl.touched && !reportCardYearControl.touched) {
                    return { 'requiredDataError': 'Report card year OR provider must be selected.' };
                }
            }

            // return null to indicate the form is valid
            return null;
        };
    }

    hideFormDialog() {
        this.formDialogVisible = false;
    }

    showFormDialog() {
        // hide any previous errors
        this.errorMessages = [];
        this.formDialogVisible = true;
    }

    createForm() {
        // by default, configure the form for new report card creation by setting
        // the initial values of both dropdowns to empty string
        this.selectedReportCardDataSourceIdControl = new FormControl('');
        this.selectedReportCardYearControl = new FormControl('');

        this.editReportCardForm = this.fb.group({
            selectedReportCardDataSourceIdControl: this.selectedReportCardDataSourceIdControl,
            selectedReportCardYearControl: this.selectedReportCardYearControl
        }, {
                validator: this.customGroupValidator(this.selectedReportCardDataSourceIdControl, this.selectedReportCardYearControl,
                    this.isCreatingNewReportCard),
                asyncValidator: this.duplicateReportCardValidator.bind(this)
            });
    }

    duplicateReportCardValidator() {
        return new Promise(resolve => {

            if ((this.errorMessages) && this.errorMessages.length === 0) {
                resolve({ uniqueReportCard: true });
            } else {
                resolve(null);
            }
        });
    }

    showError(errorMessages: Message[]) {
        this.errorMessages = errorMessages;
    }

    ngOnInit() {
        this.createForm();
    }

    onEditReportCardFormSubmitted() {

        let newReportCard = this.getReportCard(
            this.selectedReportCardDataSourceIdControl.value,
            this.selectedReportCardYearControl.value,
            this.reportCardDataSourcesItems
        );

        this.reportCardCreated.emit(newReportCard);
    }

    resetForm() {
        this.createForm();
        this.isFormActive = false;
        setTimeout(() => this.isFormActive = true, 0);
    }

    onFormValueChanged(data: any) {
        let newReportCard = this.getReportCard(
            this.selectedReportCardDataSourceIdControl.value,
            this.selectedReportCardYearControl.value,
            this.reportCardDataSourcesItems
        );

        this.editReportCardFormValueChanged.emit(newReportCard);
    }

    private getReportCard(reportCardDataSourceIdString: string, reportCardYearString: string,
        reportCardDataSourceItems: SelectItem[]): ReportCard {

        let selectedReportCardYear: number = Number(reportCardYearString);
        let selectedProviderReportCardId: number = Number(reportCardDataSourceIdString);

        let selectedProviderReportCardName: string = 'Unknown Report Card';

        for (var i = 0; i < this.reportCardDataSourcesItems.length; i++) {
            var element = this.reportCardDataSourcesItems[i];
            if (Number(element.value) === selectedProviderReportCardId) {
                selectedProviderReportCardName = element.label;
                break;
            }
        }

        let reportCard: ReportCard = new ReportCard();

        reportCard.reportCardYear = selectedReportCardYear;

        reportCard.reportCardDataSource = new ReportCardDataSource(
            selectedProviderReportCardId,
            selectedProviderReportCardName
        );

        return reportCard;
    }
}

create-report-card-form.component.html

<p-dialog header={{formHeaderString}} [(visible)]="formDialogVisible" [responsive]="true" showEffect="fade "
    [modal]="true" width="400">
    <form *ngIf="isFormActive" [formGroup]="editReportCardForm" (ngSubmit)="onEditReportCardFormSubmitted()">
        <div class="ui-grid ui-grid-responsive ui-fluid " *ngIf="reportCardDataSourcesItems ">
            <div class="ui-grid-row ">
                <p-dropdown [options]="reportCardDataSourcesItems" formControlName="selectedReportCardDataSourceIdControl" [autoWidth]="true"></p-dropdown>
            </div>
            <div class="ui-grid-row ">
                <p-dropdown [options]="reportCardYearItems" formControlName="selectedReportCardYearControl" [autoWidth]="true"></p-dropdown>
            </div>
            <div class="ui-grid-row ">
                <p-messages [value]="errorMessages"></p-messages>
            </div>
            <footer>
                <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix ">
                    <button type="submit" pButton icon="fa-check " 
                    [disabled]="!editReportCardForm?.valid" label="Save "></button>
                </div>
            </footer>
        </div>
    </form>
</p-dialog>

home.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
// // import { REACTIVE_FORM_DIRECTIVES } from '@angular/forms';
// import {ROUTER_DIRECTIVES} from '@angular/router';
// import { InputText, Panel, SelectItem, Message, Growl, Dialog, DataTable, Column, Header, Footer, Tooltip } from 'primeng/primeng';
import { Message, SelectItem } from 'primeng/primeng';

import {CreateReportCardFormComponent} from './create-report-card-form.component';
import { ReportCardDataSource, ReportCard, ProviderData, DataService,
   DUPLICATE_REPORT_CARD_MESSAGE } from '../shared/index';
import {ReportCardCommands} from './enums';

/**
 * This class represents the lazy loaded HomeComponent.
 */
@Component({
  moduleId: module.id,
  selector: 'sd-home',
  templateUrl: 'home.component.html',
  styleUrls: ['home.component.css']
  //,directives: [CreateReportCardFormComponent]
})

export class HomeComponent implements OnInit {

  public growlMessages: Message[] = [];
  public createReportCardError: Message[] = [];
  public reportCardDataSourcesItems: SelectItem[] = [{ label: 'Select Provider', value: '' }];
  public reportCardYearItems: SelectItem[] = [{ label: 'Select Year', value: '' }];
  public providerData: ProviderData = new ProviderData();
  public displayReportCardDeleteConfirmation: boolean = false;

  private isCreatingNewReportCard: boolean = true;
  private selectedReportCard: ReportCard;

  @ViewChild(CreateReportCardFormComponent)
  private createReportCardFormComponent: CreateReportCardFormComponent;

  constructor(private dataService: DataService) { }

  ngOnInit() {
    let reportCardDataSources: ReportCardDataSource[] = this.dataService.getReportCardDataSources();

    for (var i = 0; i < reportCardDataSources.length; i++) {
      var element = reportCardDataSources[i];
      this.reportCardDataSourcesItems.push({ label: element.reportCardSourceName, value: element.reportCardSourceId });

      // retrieve data from localStorage if available
      this.providerData = this.dataService.getProviderData();
    }

    // initialize report card years
    const minYear: number = 2000;
    // TODO: maxYear should be sourced from the server by a service
    let maxYear: number = (new Date()).getFullYear();

    for (var i = maxYear; i >= minYear; i--) {
      this.reportCardYearItems.push({ value: i.toString(), label: i.toString() });
    }
  }

  // Returns the index of the report card in providerData.reportCards that has the same reporCardSourceId
  // and reportCardYear as selectedReportCard, or -1 if there is no match.
  indexOf(selectedReportCard: ReportCard): number {
    return this.providerData.reportCards.findIndex(x =>
      x.reportCardDataSource.reportCardSourceId === selectedReportCard.reportCardDataSource.reportCardSourceId &&
      x.reportCardYear === selectedReportCard.reportCardYear);
  }

  onReportCardCreated(newReportCard: ReportCard) {
    if (newReportCard) {

      if ((this.indexOf(newReportCard) > -1)) {
        // attemp to create a duplicate report card; show error
        this.setCreateReportCardFromErrorMessage(DUPLICATE_REPORT_CARD_MESSAGE);
      } else {
        if (this.isCreatingNewReportCard) {
          // save new report card
          this.createReportCardError = [];
          this.createReportCardFormComponent.hideFormDialog();
          this.providerData.reportCards.splice(0, 0, newReportCard);

          this.createReportCardFormComponent.hideFormDialog();

        } else {
          // update existing report card
          let reportCardToUpdateIndex: number = this.indexOf(this.selectedReportCard);

          if (reportCardToUpdateIndex > -1) {
            this.providerData.reportCards[reportCardToUpdateIndex].reportCardDataSource.reportCardSourceId
              = newReportCard.reportCardDataSource.reportCardSourceId;
            this.providerData.reportCards[reportCardToUpdateIndex].reportCardDataSource.reportCardSourceName
              = newReportCard.reportCardDataSource.reportCardSourceName;
            this.providerData.reportCards[reportCardToUpdateIndex].reportCardYear
              = newReportCard.reportCardYear;
          }
        }
        this.dataService.storeProviderData(this.providerData);
        this.isCreatingNewReportCard = true;
        this.clearCreateReportCardFormErrorMessage();
        this.createReportCardFormComponent.hideFormDialog();
      }
    }
  }

  editReportCardFormValueChanged(newReportCard: ReportCard) {
    if (this.indexOf(newReportCard) === -1) {
      // clear duplicate report card error message in 'create report card' dialog
      this.clearCreateReportCardFormErrorMessage();
    } else {
      // set duplicate report card error message
      this.setCreateReportCardFromErrorMessage(DUPLICATE_REPORT_CARD_MESSAGE);
    }
  }

  onAddReportCardButtonClicked() {
    this.isCreatingNewReportCard = true;
    this.createReportCardFormComponent.configureForm(new ReportCard(), this.isCreatingNewReportCard);
    this.createReportCardFormComponent.showFormDialog();
  }

  onReportCardDeleteButtonClicked(reportCard: ReportCard) {
    this.reportCardCommandExecute(reportCard, ReportCardCommands.Delete);
  }

  onReportCardEditButtonClicked(reportCard: ReportCard) {
    this.reportCardCommandExecute(reportCard, ReportCardCommands.EditReportCard);
  }

  onAddVotesRouterLinkClicked(reportCard: ReportCard) {
    this.reportCardCommandExecute(reportCard, ReportCardCommands.EditVotes);
  }

  onReportCardDeleteConfirmButtonClick(isDeleteOk: boolean) {
    if (isDeleteOk) {
      this.providerData.reportCards.splice(this.providerData.selectedReportCardIndex, 1);
      // store updated reportCards in local storage
      this.dataService.storeProviderData(this.providerData);
    }
    this.displayReportCardDeleteConfirmation = false;
  }

  reportCardCommandExecute(reportCard: ReportCard, command: ReportCardCommands) {
    this.providerData.selectedReportCardIndex = this.indexOf(reportCard);
    this.selectedReportCard = reportCard;

    switch (command) {
      case ReportCardCommands.EditVotes:
        this.dataService.storeProviderData(this.providerData);
        break;
      case ReportCardCommands.Delete:
        this.displayReportCardDeleteConfirmation = true;
        break;
      case ReportCardCommands.EditReportCard:
        this.isCreatingNewReportCard = false;
        this.createReportCardFormComponent.configureForm(reportCard, this.isCreatingNewReportCard);
        this.createReportCardFormComponent.showFormDialog();
        break;
      default:
        break;
    }
  }

  private setCreateReportCardFromErrorMessage(message: Message) {
    this.createReportCardError = [];
    this.createReportCardError.push(message);

    this.createReportCardFormComponent.showError(this.createReportCardError);
  }

  private clearCreateReportCardFormErrorMessage() {
    this.createReportCardError = [];
    this.createReportCardFormComponent.showError(this.createReportCardError);
  }
}

home.component.html

<p-growl [value]="growlMessages" sticky="sticky"></p-growl>
<p-dataTable [value]="providerData.reportCards" [paginator]="true" rows="15" [responsive]="true">
  <header>
    <div>
      <h1>Report Cards ({{providerData.reportCards.length}})</h1>
    </div>
    <button type="button" pButton icon="fa-plus" (click)="onAddReportCardButtonClicked()" label="Add" title="Add new report card"></button>
  </header>
  <p-column styleClass="col-button">
    <template let-reportCard="rowData">
      <button type="button" pButton (click)="onReportCardEditButtonClicked(reportCard)" icon="fa-pencil" title="Edit report card"></button>
    </template>
  </p-column>
  <p-column field="reportCardDataSource.reportCardSourceName" header="Report Card" [sortable]="true"></p-column>
  <p-column field="reportCardYear" header="Year" [sortable]="true"></p-column>
  <p-column header="Votes" [sortable]="false">
    <template let-reportCard="rowData">
      {{reportCard.votes.length}}
      <!--<button type="button" pButton icon="fa-pencil-square" (click)="editVotes(reportCard)" title="Edit votes"></button>-->
      <a [routerLink]="['/votes']" (click)="onAddVotesRouterLinkClicked(reportCard)">Edit</a>
    </template>
  </p-column>
  <p-column styleClass="col-button">
    <template let-reportCard="rowData">
      <button type="button" pButton (click)="onReportCardDeleteButtonClicked(reportCard)" icon="fa-trash" title="Delete report card"></button>
    </template>
  </p-column>
</p-dataTable>

<create-report-card-form [currentReportCardCount]="providerData.reportCards.length" [reportCardDataSourcesItems]="reportCardDataSourcesItems"
  [reportCardYearItems]="reportCardYearItems" (reportCardCreated)=onReportCardCreated($event) (editReportCardFormValueChanged)=editReportCardFormValueChanged($event)>
</create-report-card-form>

<p-dialog header="Confirm Deletion" [(visible)]="displayReportCardDeleteConfirmation" modal="modal" showEffect="fade">
  <p>
    Delete the following report card and all related data (<strong>NO undo</strong>)?
  </p>
  <p>
    <strong>{{providerData?.reportCards[providerData.selectedReportCardIndex]?.reportCardDataSource?.reportCardSourceName}}</strong><br/>
    <strong>{{providerData?.reportCards[providerData.selectedReportCardIndex]?.reportCardYear}}</strong>
  </p>
  <footer>
    <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
      <button type="button" pButton icon="fa-close" (click)="onReportCardDeleteConfirmButtonClick(false)" label="No"></button>
      <button type="button" pButton icon="fa-check" (click)="onReportCardDeleteConfirmButtonClick(true)" label="Yes"></button>
    </div>
  </footer>
</p-dialog>
angular  typescript 
— ebhh2001
nguồn
2
Bạn nên bao gồm mã từ tạo-báo cáo-thẻ-form.component.ts
— Isaac
@Isaac - đã thêm mã từ create-report-card-form.component.ts
— ebhh2001 15/08/2016
Bạn có thể đăng các mẫu không? Lỗi cho bạn biết rằng mẫu tạo-báo cáo-thẻ-biểu mẫu hoặc thành phần mẹ đang cố gắng liên kết hoặc truy cập thuộc tính 'currentReportCardCount' dường như không tồn tại trên thành phần CreateReportCardFormComponent.
— ABabin
@AndrewBabin - thêm mã và mẫu cho thành phần mẹ và con.
— ebhh2001

Câu trả lời:

58 
<create-report-card-form [currentReportCardCount]="providerData.reportCards.length" ...
                         ^^^^^^^^^^^^^^^^^^^^^^^^

Trong mẫu HomeComponent của bạn, bạn đang cố gắng liên kết với một đầu vào trên thành phần CreateReportCardForm không tồn tại.

Trong CreateReportCardForm, đây là ba đầu vào duy nhất của bạn:

@Input() public reportCardDataSourcesItems: SelectItem[];
@Input() public reportCardYearItems: SelectItem[];
@Input() errorMessages: Message[];

Thêm một cái cho currentReportCardCount và bạn sẽ sẵn sàng.

— ABabin
nguồn
Cảm ơn! Thêm @Input () cho currentReportCardCount đã khắc phục sự cố này. Sai lầm của tôi là cho rằng mã đúng chỉ vì nó hoạt động trong RC4 trở về trước.
— ebhh2001
3
Không có gì! Thành thật mà nói, tôi hơi ngạc nhiên RC4 sẽ bỏ qua một vấn đề như vậy.
— ABabin
6
Ngoài ra, nếu thành phần của bạn là một Mô-đun dùng chung. Đảm bảo bạn thêm nó vào cả khai báo @NgModule VÀ xuất các mảng.
— Kildareflare
46

Tôi đã sửa nó bằng cách thêm tiền tố (Attr.):

<create-report-card-form [attr.currentReportCardCount]="expression" ...

Thật không may, điều này chưa được ghi lại một cách chính xác.

chi tiết hơn ở đây

— Houman
nguồn
25
Đừng làm điều này. Nó sẽ ngăn thuộc tính đó được truyền cho các chỉ thị lồng nhau.
— igasparetto
1
@igasparetto trong một tình huống như thế này, có thể bạn không có chỉ thị lồng bên trong
— CodyBugstein
26

Có nhiều nguyên nhân có thể gây ra lỗi này:

1) Khi bạn đặt thuộc tính 'x' bên trong dấu ngoặc, bạn đang cố gắng liên kết với nó. Do đó, điều đầu tiên cần kiểm tra là thuộc tính 'x' có được xác định trong thành phần của bạn bằng trình Input()trang trí hay không

Tệp html của bạn:

<body [x]="...">

Tệp lớp của bạn:

export class YourComponentClass {

  @Input()
  x: string;
  ...
}

(đảm bảo bạn cũng có dấu ngoặc đơn)

2) Đảm bảo rằng bạn đã đăng ký các lớp thành phần / chỉ thị / đường ống của mình trong NgModule:

@NgModule({
  ...
  declarations: [
    ...,
    YourComponentClass
  ],
  ...
})

Xem https://angular.io/guide/ngmodule#declare-directives để biết thêm chi tiết về khai báo chỉ thị.

3) Cũng xảy ra nếu bạn có lỗi đánh máy trong chỉ thị góc cạnh của mình. Ví dụ:

<div *ngif="...">
     ^^^^^

Thay vì:

<div *ngIf="...">

Điều này xảy ra bởi vì góc dưới mui xe chuyển đổi cú pháp dấu hoa thị thành:

<div [ngIf]="...">
— Caner
nguồn
Tiết kiệm cuộc sống. Tôi không thể nhận được thông báo lỗi đó .. Vấn đề là tôi đã không đăng ký thành phần con của mình trong mô-đun.
— Adeel Shekhani
Một lý do khác khiến lỗi này có thể xảy ra là khi bạn muốn sử dụng bộ chọn thuộc tính cho thành phần của mình nhưng lại quên dấu ngoặc trong bộ chọn. Ví dụ: bạn muốn làm điều này: <tr my-component></tr>nhưng trong @Componentbạn làm điều này selector: 'my-component'thay vì selector: '[my-component]'...
— BoDeX
Có - thông báo lỗi đó có thể gây hiểu lầm - Tôi đã tán thành câu trả lời này vì nó trả lời kỹ lưỡng hơn câu hỏi này trong trường hợp chung. Cụ thể # 2 không trực quan chút nào dựa trên lỗi "Không thể liên kết với 'Thuộc tính X' vì nó không phải là thuộc tính đã biết của 'Thành phần con'" - vì vậy đây là một mẹo hữu ích để theo dõi điều đó.
— Tim
10

Nếu bạn sử dụng Angular CLI để tạo các thành phần của mình, giả sử CarComponent, nó gắn appvới tên bộ chọn (tức là app-car) và điều này gây ra lỗi ở trên khi bạn tham chiếu thành phần trong chế độ xem chính. Do đó, bạn phải thay đổi tên bộ chọn trong chế độ xem chính để giả sử <app-car></app-car>hoặc thay đổi bộ chọn trong CarComponentthànhselector: 'car'

— Alf Moh
nguồn
5
Hài hước đó là những điều nhỏ nhặt mà cắn bạn khó khăn nhất
— Nico
Tôi đã tìm kiếm câu trả lời cho câu hỏi này trong một thời gian dài! Bạn chỉ cần giải quyết vấn đề! Nó hoạt động tốt! Cảm ơn bạn!
— SagitSri
7

Tôi đã gặp phải lỗi tương tự, khi tôi quên khai báo thành phần tùy chỉnh của mình NgModule- hãy kiểm tra ở đó, nếu các giải pháp khác không hoạt động với bạn.

— Oli
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.