Question

我已经重新配置了一些代码，现在收到错误“无法绑定到'count'，因为它不是'ng-container'的已知属性”

而不是具有通知组件和通知小组件。

我现在已经删除了通知组件，只希望拥有通知小部件。

重新配置之前的代码，按预期方式工作：

notification-widget.component.html

<div class="af-notification-widget">
    <notification [count]="config.count"></notification>
</div>

notification-widget.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { NotificationConfigComponent } from '../../widget-creator/notification-config/notification-config.component';

@Component({
  selector: 'notification-widget',
  templateUrl: './notification-widget.component.html',
  styleUrls: ['./notification-widget.component.scss']
})
export class NotificationWidgetComponent implements OnInit {
  @Input() config: NotificationConfigComponent;

  constructor() { }

  ngOnInit() { }
}

notification.component.html

<ng-container *ngFor="let item of items; let i = index">
  <ng-container *ngIf="i < count">
    <div class="af-notification"
         (click)="itemRead(i)"
         routerLink="/budgeting/{{ item.url }}">
      <div class="af-notification__content">
        <span class="af-notification__title"
              [class.read]="item['read'] == true">{{ item['title'] }}
        </span>
        <span class="af-notification__description">{{ item['description'] }}</span>
        <span class="af-notification__date-time">{{ item['date'] }}</span>
      </div>
  </ng-container>
</ng-container>

notification.component.ts

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

@Component({
  selector: 'notification',
  templateUrl: './notification.component.html',
  styleUrls: ['./notification.component.scss']
})
export class NotificationComponent implements OnInit {
  @Input() data: any;
  @Input() count: number;
  items = [
    {
      title: 'Import of .......... failed',
      description:
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
      date: '27/08/2019',
      read: true
    },
    {
      title: 'Manager ..........approved the budget and prices',
      description:
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
      date: '26/08/2019',
      read: true
    },
    {
      title: 'Manager ..........approved the budget',
      description:
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
      date: '26/08/2019',
      read: true
    }
  ];

  constructor() { }

  deleteWidget(i) {
    this.items.splice(i, 1);
  }
  itemRead(i) {
    if (this.items[i].read == false) {
      this.items[i].read = true;
    }
  }
  ngOnInit() { }
}

而不是具有通知组件和通知小组件。

我现在已经删除了通知组件，只希望拥有通知小部件。

删除通知组件后的代码，该代码会产生错误：

notification-widget.component.html

<div class="af-notification-widget">
  <ng-container [count]="config.count" *ngFor="let item of items; let i = index">
    <ng-container *ngIf="i < count">
      <div class="af-notification" (click)="itemRead(i)" routerLink="/budgeting/{{ item.url }}">
        <div class="af-notification__content">
          <span class="af-notification__title" [class.read]="item['read'] == true">{{ item['title'] }}
          </span>
          <span class="af-notification__description">{{ item['description'] }}</span>
        <span class="af-notification__date-time">{{ item['date'] }}</span>
        </div>
      </div>
    </ng-container>
  </ng-container>
</div>

notification-widget.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { NotificationConfigComponent } from '../../widget-creator/notification-config/notification-config.component';

@Component({
  selector: 'notification-widget',
  templateUrl: './notification-widget.component.html',
  styleUrls: ['./notification-widget.component.scss']
})
export class NotificationWidgetComponent implements OnInit {
  @Input() config: NotificationConfigComponent;
  @Input() count: number;
  items = [
    {
      title: 'Import of .......... failed',
      description:
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
      date: '27/08/2019',
      read: true
    },
    {
      title: 'Manager ..........approved the budget and prices',
      description:
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
      date: '26/08/2019',
      read: true
    },
    {
      title: 'Manager ..........approved the budget',
      description:
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
      date: '26/08/2019',
      read: true
    }
  ];

  constructor() { }

  deleteWidget(i) {
    this.items.splice(i, 1);
  }
  itemRead(i) {
    if (this.items[i].read == false) {
      this.items[i].read = true;
    }
  }
  ngOnInit() { }
}

notification-config.component.ts

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

@Component({
  selector: 'notification-config',
  templateUrl: './notification-config.component.html'
})
export class NotificationConfigComponent {
  public count: number = 5;
  constructor() { }
}

notification-config.component.html

<form>
    Notifications:<br>
    <input min="1" name="notificationsRequired" type="number" [(ngModel)]="count" />
</form>

在删除通知组件并将代码合并到通知小组件之后，我不确定为什么收到错误消息-“无法绑定到'count'，因为它不是的已知属性'ng-container'“

Answer 1

从count属性中删除@Input装饰器，因为您将其设置在同一组件中

Answer 2

正如其他人所说，count不是ng-container的属性，这就是为什么您的代码不起作用的原因。您应该从ng-container中删除[count] = config.count分配。您也可以删除@input（）count：number;因为您没有任何要数的作业了。最后要做的是更改任何引用以计数html文件中的count，因为count不再是打字稿变量。只需将count替换为config.count即可，您应该会很好！

无法绑定到“计数”，因为它不是“ ng-container”的已知属性

2 个答案: