Как привязать объект к одному компоненту к другому? - PullRequest
Новая
       6

Как привязать объект к одному компоненту к другому?

0 голосов
/ 24 октября 2019

Я пытаюсь изучить Angular8, но теперь у меня возникла проблема с некоторым кодом для передачи объекта или значения из одного компонента в другой.

Я пробовал @ Input и с этим результат не определен.

У меня есть этот компонент, который возвращает, с [(ngModel)] результат двух входных данных;название и описание. после компонента app-add-item 

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

@Component({
  selector: 'app-add-item',
  templateUrl: './add-item.component.html',
  styleUrls: ['./add-item.component.scss'],
})

export class AddItemComponent implements OnInit {
  items = [];
  // itemList -> chenge next whit the list of lists for choice one
  itemList = 'example';
  itemID: number = this.items.length + 1;
  itemTitle: string;
  itemDescription: string;

  ngOnInit() {
    this.itemTitle = '';
    this.itemDescription = '';
  }

  addItem() {
    this.items.push({
      list: this.itemList,
      id: this.itemID,
      title: this.itemTitle,
      description: this.itemDescription,
      completed: false,
    });

    this.itemID++;

    this.ngOnInit();
  }

}

html-шаблон для app-add-item .

add-todo-item является вторым компонентом. Этот компонент создает представление элемента. 

<section class="add-item-section">
    <div class="add-item-content">
        <input type="text" class="add-textbox add-title" placeholder="Add the best title ever!" [(ngModel)]="itemTitle"/>
        <input type="text" class="add-textbox add-description" placeholder="Add a description for the best todo item!" [(ngModel)]="itemDescription"/>
        <input type="button" class="add-button" value="+" (click)="addItem()"/>
    </div>
</section>

<section class="items-content">
    <div class="item-content" *ngFor="let item of items">
        <app-todo-item [itemTitle]= "item.title"></app-todo-item>
    </div>
</section>

после компонента app-todo-item 

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

interface TodoItem {
  list: string;
  id: number;
  title: string;
  description?: string;
  completed: boolean;
}

@Component({
  selector: 'app-todo-item',
  templateUrl: './view-item.component.html',
  styleUrls: ['./view-item.component.scss'],
})

export class ViewItemComponent {
  @Input() itemTitle: string;
  items: TodoItem = {
    list: 'example',
    id: 1,
    title: this.itemTitle,
    description: 'an example list item for the view model',
    completed: false,
  };
}

спасибо за ответ.

1 Ответ

1 голос
/ 24 октября 2019 
export class ViewItemComponent {
  @Input() itemTitle: string;
  item: TodoItem = {
    list: 'example',
    id: 1,
    title: this.itemTitle,
    description: 'an example list item for the view model',
    completed: false,
  };
}

В приведенном выше коде значение для элемента установлено на литерал объекта до того, как вы введете какой-либо текст в текстовое поле. Это означает, что для item.title будет установлено значение undefined, прежде чем будет иметь место любая входная привязка.

Если вы сделаете itemTitle установщиком, вы можете устанавливать значение item.title каждый раз, когда пользователь вводитвведите в текстовое поле. 

@Input()
set itemTitle(value) {
  this.item.title = value;
}
item: TodoItem = {
  list: 'example',
  id: 1,
  title: 'Default Title',
  description: 'an example list item for the view model',
  completed: false,
};

Кроме того, вы можете привязать весь объект элемента todo в компоненте добавления элемента. 

// add-item.component.html
<div class="item-content" *ngFor="let item of items">
  <app-todo-item [item]="item"></app-todo-item>
</div>

// view-item.component.ts
export class ViewItemComponent {
  @Input()
  item: TodoItem;
}

И использовать привязку свойства в шаблоне. 

// view-item.component.html
<p>ItemID-{{ item.id }}</p>
<p>{{ item.title }}</p>
<p>{{ item.description }}</p>

https://stackblitz.com/edit/angular-gzefwj

...