Angular 9, Привязка массива как @Input для дочернего компонента не работает - PullRequest
Новая
       42

Angular 9, Привязка массива как @Input для дочернего компонента не работает

1 голос
/ 15 апреля 2020

По какой-то причине массив не передается дочерним компонентам. Что мне не хватает?

Мой дочерний компонент:. 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 {  

  }



}

если я инициализирую itemsList дочернего компонента (ThreeDotsMenuComponent) в ngOnInit, он работает и отображается правильно. любая другая опция не работает, включите эту строку 

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

Я уверен, что где-то упустил небольшую вещь, я уже следовал многим инструкциям и прочитал много постов здесь и на других форумах, и все еще застрял ,

Ответы [ 3 ]

1 голос
/ 15 апреля 2020

В дочернем шаблоне 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

1 голос
/ 15 апреля 2020

В компоненте ThreeDotsMenuComponent html вы ссылаетесь на items, но вам нужно использовать itemsList

<ul>
    <li *ngFor="let item of items"> <!-- here, use itemsList -->
        <a (click)="itemHasBeenClicked(item)">{{item}}</a>
    </li> 
<ul>
1 голос
/ 15 апреля 2020

Ну, вы должны использовать =, а не :. С помощью : вы определяете тип свойства, а не фактическое значение: 

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