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

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

1 голос
/ 30 октября 2019

У меня есть небольшое приложение, которое отображает счетчик с количеством дней между событием и фактической датой. Я сделал это для изучения Angular.

У меня есть список счетчиков, и каждый счетчик можно увидеть в будущем со своими представлениями в списке. Я хочу удалить счетчик, но для этой задачи мне нужно передать объект пользовательскому угловому компоненту. Но когда я пытаюсь извлечь его из моего компонента, он не определен. Разве Angular может давать только примитивный тип?

Моя модель счетчика: 

    export class Counter {
      picture: string;
      synopsis: string;
      constructor(public title: string, public date: Date) {
      }
    }

Я называю свой список счетчиков с этим кодом: 

     <div *ngFor="let counter of counters">
        <app-display-test title="{{ counter.title }}" 
                          date="{{ counter.date }}"
                          counter="{{counter}}">
        </app-display-test>
    </div>

Моя модель дисплея:

    export class DisplayTestComponent implements OnInit {

      @Input() title: string;
      @Input() date: Date;
      @Input() counter: Counter;

      constructor() {
       }

      ngOnInit() {
        console.log(this.title);
        this.calculateCUrrentDate(); // my method for calculate the time
        console.log(this.counter);
        console.log(this.date);
      }
    }

В методе ngOnInit значение и дата имеют значение, но вход счетчика не определен, и я не понимаю, почему

Ответы [ 3 ]

2 голосов
/ 30 октября 2019

Попробуйте так:

Рабочая демоверсия

TS: 

counters = []

constructor() {
   this.counters.push(new Counter("test",new Date))
}

Шаблон: 

<div *ngFor="let counter of counters">
    <app-display-test [title]="counter.title" [date]="counter.date" [counter]="counter">
    </app-display-test>
</div>
1 голос
/ 30 октября 2019

Дело в том, что в угловых хуках (NgOnInit, AfterView и т. Д.) Вы не знаете, когда разрешен ввод для немого компонента.

Поэтому лучший подход - установить его так: 

@Input() set(counter: Counter) {

if(!counter) {
return;
}

//do your logic here
this.calculateCUrrentDate(); // my method for calculate the time
console.log(counter);

}

То же самое относится и к другим входам, поэтому, если вам нужно использовать этот счетчик в html, вам потребуется иметь локальную переменную в этом немом компоненте и вызывать обнаружение изменений после того, как вы назначите ему значение, которое будет инициироваться длярендеринг в html.

PS: Я бы посоветовал вам использовать оператор elvis с углового в html, например,

counter.somehting разрушит ваше приложение, если в какой-то момент счетчик не определен.

Так вот, например, вы должны использовать это и во всем приложении: 

    <div *ngFor="let counter of counters">
    <app-display-test [title]="counter?.title" 
                      [date]="counter?.date"
                      [counter]="counter">
    </app-display-test>
</div>
1 голос
/ 30 октября 2019

Вы использовали интерполяцию строк для передачи объекта. Попробуйте это 

<div *ngFor="let counter of counters">
    <app-display-test [title]="{{ counter.title }}" 
                      [date]="{{ counter.date }}"
                      [counter]="counter">
    </app-display-test>
</div>
...