html - 通过输入/输出在 HTML 中显示常量？

Question

list.component，它有一个输入变量tasks和listtype，可以是即将到来的或完成的。如果检查任务（完成）和 tasksChange，则使用@Output(s) 来更改任务：

import {Component, EventEmitter, Input, Output} from '@angular/core';
import {Map, List} from 'immutable';

@Component({
  selector: 'app-task-list',
  templateUrl: 'task-list.component.html'
})
export class TaskListComponent  {
  @Input() tasks: string[] = [];
  @Input() listType: 'upcoming' | 'completed' = 'upcoming';
  @Output() itemChecked: EventEmitter<boolean> = new EventEmitter();
  @Output() tasksChange: EventEmitter<string[]> = new EventEmitter();



  constructor() { }

  /**
   * Is called when an item from the list is checked.
   * @param selected---Value which indicates if the item is selected or deselected.
   */
  onItemCheck(selected: boolean) {
    this.itemChecked.emit(selected);
  }

  /**
   * Is called when task list is changed.
   * @param changedTasks---Changed task list value, which should be sent to the parent component.
   */
  onTasksChanged(changedTasks: string[]) {
    this.tasksChange.emit(changedTasks);
  }
}

现在我想用 my 显示即将到来的任务upcoming-tasks.component，它有 3 个模拟任务：

import { Component, OnInit } from '@angular/core';
import {TaskListComponent} from "../task-list/task-list.component";


@Component({
  selector: 'app-upcoming-tasks',
  templateUrl: './upcoming-tasks.component.html',
  styleUrls: ['./upcoming-tasks.component.css']
})
export class UpcomingTasksComponent extends TaskListComponent {
  upcomingTasks: string[] = ['bla', 'blub', 'bap'];

  constructor() {
    super();
  }

  ngOnInit(): void {
  }

}

和 HTML 的upcoming-tasks.html：

<h1>Upcoming Tasks</h1>
<app-task-list [(tasks)]="upcomingTasks" [listType]="'upcoming'" (itemChecked)="onItemCheck($event)"></app-task-list>

那么在我的 UI 上完成这些任务我缺少什么？

标签： htmlangulartypescriptinputoutput