无法绑定到'item'，因为它不是'history-macro'的已知属性

时间：2017-04-25 01:07:26

标签： angular ionic2

我的应用程序变得非常大，所以我试图将我的组件分离到模块但由于某种原因我不能让我的历史宏组件在我的EditMealModalModule的一个组件中工作。我正在我的AppModule中导出historyMacroComponent。

这是我的AppModule.ts：

@NgModule({
  declarations: [
    MyApp,
    Home,
    ProgressComponent,
    SettingsModal,
    VisualizeModal,
    EducationModal,
    AddMealsModal,
    ShowMealModal,
    AddMacrosModal,
    VisualizeMacroModal,
    MealsModal,
    WeightPage,
    TabsPage,
    WlTrackerComponent,
    CalorieTrackingComponent,
    PieGraphComponent,
    HistoryItemComponent,
    HistoryMacroComponent,
    LegendItemComponent,
    MacroModeComponent,
    LazyKetoModeComponent,
    SavedMealIconComponent,
    DayActionsComponent,
    MacroSummaryComponent,
    MealComponent,
    Filter
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp, {
      scrollAssist: true,
      autoFocusAssist: true
    }),
    IonicStorageModule.forRoot(),
    FormsModule,
    EditMealModalModule,
    EditMacroModalModule,
    MonthlySuccessModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    Home,
    WeightPage,
    TabsPage
  ],
  providers: [
    {
    provide: ErrorHandler,
    useClass: RavenErrorHandler
    },
    Day,
    Carbs,
    Database,
    Weight,
    PageManager,
    Analytics,
    Meals
  ],
  exports: [
    HistoryMacroComponent
  ]
})
export class AppModule {
}

这是我的EditMealModalModule.ts：

@NgModule({
  declarations: [
    EditMacroModal
  ],
  imports: [
    IonicPageModule.forChild(EditMacroModal)
  ],
  exports: [
    EditMacroModal
  ]
})
export class EditMacroModalModule {}

这是我的HistoryMacroComponent.ts：

import { Component, Input } from '@angular/core';
import { MacroRecord } from '../../providers/carbs';
import { Day } from '../../providers/day';

@Component({
  selector: 'history-macro',
  templateUrl: 'history-macro.html'
})
export class HistoryMacroComponent {

  @Input() item: MacroRecord;

  constructor(public dayService: Day) {
  }

}

HistoryMacroComponent.html：

    <div class="history-item">
      <saved-meal-icon [title]="item.title"></saved-meal-icon>
      <div class="history-macro-legends">
        <div class="history-macro-legends-first">
          <legend-item colour="#0eabd8" [amount]="item.count" unit="g"></legend-item>
          <legend-item colour="#ec226c" [amount]="item.fat" unit="g"></legend-item>
        </div>
        <div>
          <legend-item colour="#58c912" [amount]="item.protein" unit="g"></legend-item>
          <legend-item colour="#ffc105" [amount]="item.calories" unit="kcal"></legend-item>
        </div>
      </div>
      <span class="history-ago">{{dayService.dateToTime(item.timestamp) }}</span>
    </div>

EditMealModal.ts：

import { Component } from '@angular/core';
import { IonicPage, NavParams, ViewController } from 'ionic-angular';
import { Analytics } from "../../providers/analytics";
import { Validators, FormGroup, FormBuilder } from "@angular/forms";
import {MealRecord, Meals} from "../../providers/meals";

@IonicPage()
@Component({
  selector: 'page-edit-meal-modal',
  templateUrl: 'edit-meal-modal.html',
})
export class EditMealModal {

  public form: FormGroup;

  constructor(public params: NavParams,
              private viewCtrl: ViewController,
              private fb: FormBuilder,
              private mealsService: Meals,
              private analytics: Analytics) {
    this.analytics.trackView(`Edit Meal Page`);
  }

  public ngOnInit() {
    const form = {
      title: [null, Validators.required],
      carbs: [null],
      fat: [null],
      protein: [null],
      details: [null],
      calories: [null]
    };

    this.form = this.fb.group(form);

    this.setMeal();
  }

  public dismiss(): void {
    this.viewCtrl.dismiss();
  }

  public get meal(): MealRecord {
    return {
      title: this.form.value.title,
      carbs: parseInt(this.form.value.carbs),
      details: this.form.value.details,
      calories: parseInt(this.form.value.calories),
      fat: parseInt(this.form.value.fat),
      protein: parseInt(this.form.value.protein),
      timestamp: this.params.data.timestamp
    };
  }

  public editRecord(e): void {
    e.preventDefault();

    if (!this.form.valid) {
      return;
    }

    this.mealsService.editMeal(this.meal);
    this.viewCtrl.dismiss();
  }

  private setMeal(meal: any = this.params.data): void {
    if (!meal) {
      this.dismiss();
      return;
    }

    this.form.patchValue({ title: meal.title });
    this.form.patchValue({ details: meal.details });
    this.form.patchValue({ carbs: meal.carbs || meal.count });
    this.form.patchValue({ fat: meal.fat });
    this.form.patchValue({ calories: meal.calories });
    this.form.patchValue({ protein: meal.protein });
  }

}

EditMealModal.html：

<ion-header>
  <ion-toolbar>
    <ion-title>
      Edit Meal
    </ion-title>
    <ion-buttons start>
      <button ion-button (click)="dismiss()">
        <span ion-text color="primary" showWhen="ios">Cancel</span>
        <ion-icon name="md-close" showWhen="android,windows"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content class="edit-meal-page">

  <ion-card>
    <ion-card-content text-center>
      <history-macro [item]="meal"></history-macro>
    </ion-card-content>
  </ion-card>

  <ion-card>
    <ion-card-content text-center>
      Title is required.
    </ion-card-content>
  </ion-card>


  <form class="edit-form" autocomplete="off" novalidate [formGroup]="form">

    <ion-list margin-right>
      <ion-item class="ios-ion-input-fix">
        <ion-label>Title:</ion-label>
        <ion-input name="title" type="text" formControlName="title" placeholder="Bacon and Eggs"></ion-input>
      </ion-item>

      <ion-item>
        <ion-label>Carbs:</ion-label>
        <ion-input name="carbs" type="number" formControlName="carbs"></ion-input>
      </ion-item>

      <ion-item>
        <ion-label>Fat:</ion-label>
        <ion-input name="carbs" type="number" formControlName="fat"></ion-input>
      </ion-item>

      <ion-item>
        <ion-label>Protein:</ion-label>
        <ion-input name="carbs" type="number" formControlName="protein"></ion-input>
      </ion-item>

      <ion-item>
        <ion-label>Calories:</ion-label>
        <ion-input name="calories" type="number" formControlName="calories"></ion-input>
      </ion-item>

      <ion-item class="ion-input-fix">
        <ion-label>Details:</ion-label>
        <ion-input name="details" type="text" formControlName="details" placeholder="3 pieces of bacon, 2 eggs"></ion-input>
      </ion-item>
    </ion-list>

    <div padding>
      <button ion-button block type="submit" (click)="editRecord($event)">Save Changes</button>
    </div>

  </form>

</ion-content>

我已多次阅读文档，但我仍然无法理解。希望有人可以提供帮助！

我得到的错误是：

Can't bind to 'item' since it isn't a known property of 'history-macro'.
1. If 'history-macro' is an Angular component and it has 'item' input, then verify that it is part of this module.
2. If 'history-macro' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
  <ion-card>
    <ion-card-content text-center>
      <history-macro [ERROR ->][item]="meal"></history-macro>
    </ion-card-content>
  </ion-card>
"): ng:///EditMealModalModule/EditMealModal.html@18:21
'history-macro' is not a known element:
1. If 'history-macro' is an Angular component, then verify that it is part of this module.
2. If 'history-macro' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
  <ion-card>
    <ion-card-content text-center>
      [ERROR ->]<history-macro [item]="meal"></history-macro>
    </ion-card-content>
  </ion-card>

2 个答案:

答案 0 :(得分：0)

如错误信息中所述，您似乎在history-macro部分中调用了EditMealModalModule。但是history-macro属于AppModule，您必须创建SharedModule拥有history-macro并将SharedModule导入EditMealModalModule。

添加

Submodules可以通过导入目标components来分享他们的submodule。

参考此live plunker。

答案 1 :(得分：0)

只需将<history-macro [item]="meal"></history-macro>更改为<history-macro [attr.item]="meal"></history-macro>，因为item不是知情产品，应该声明为属性。

相关问题
最新问题