Angular 9，将数组绑定为子组件的@Input 不起作用

Question

由于某种原因，数组没有传递给子组件。我缺少什么？

我的子组件： .html

<ul>
    <li *ngFor="let item of items">
        <a (click)="itemHasBeenClicked(item)">{{item}}</a>
    </li> 
<ul>

.ts

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


@Component({
  selector: 'app-three-dots-menu',
  templateUrl: './three-dots-menu.component.html',
  styleUrls: ['./three-dots-menu.component.sass']
})
export class ThreeDotsMenuComponent implements OnInit {

  constructor() { }

  @Input()
  public itemsList : string[];

  ngOnInit(): void {

  }

  @Output()
  itemClicked: EventEmitter<string> = new EventEmitter<string>();

  itemHasBeenClicked(item)
  {
    alert(item);
    this.itemClicked.emit(item);
  }
}

父组件： .html

<app-three-dots-menu  [itemsList]="menuItems"></app-three-dots-menu>

.ts

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-users-table',
  templateUrl: './users-table.component.html',
  styleUrls: ['./users-table.component.sass']
})
export class UsersTableComponent implements OnInit {

  constructor() { }
  menuItems : string[] = ['New User', 'Refresh'];

  ngOnInit(): void {  

  }



}

如果我在 ngOnInit 中初始化子组件 (ThreeDotsMenuComponent) 的 itemsList，它会正常工作并显示。任何其他选项都不起作用，包括这一行

@Input()
  public itemsList : ["item1","Item2"];

我确定我在某处遗漏了一件小事，我已经按照许多说明进行操作并阅读了此处和其他论坛中的许多帖子，但仍然卡住了。

Answer 1

嗯，你必须使用 = 而不是 :。使用 : 您定义的是属性的类型，而不是实际值：

export class UsersTableComponent implements OnInit {
  menuItems: string[] = ['New User', 'Refresh'];
}

Answer 2

在子模板 html 中，您指的是 items 而不是 itemsList

将子模板更改为：

<ul>
    <li *ngFor="let item of itemsList">
        <a (click)="itemHasBeenClicked(item)">{{item}}</a>
    </li> 
<ul>

看看下面的：https://stackblitz.com/edit/angular-v8sk5f?file=src%2Fapp%2Fchild%2Fchild.component.html

Answer 3

在三点菜单组件 html 部分，您指的是 items，但您需要使用 itemsList

<ul>
    <li *ngFor="let item of items"> <!-- here, use itemsList -->
        <a (click)="itemHasBeenClicked(item)">{{item}}</a>
    </li> 
<ul>

Angular 9，将数组绑定为子组件的@Input 不起作用

Angular 9, Binding an array as an @Input for child component is not working

angular

binding

inputbinding