Html 无法在Angular中设置未定义（定义时）的属性

我正在构建计时器应用程序/组件，但找不到我的错误。听起来是这样的：无法将属性startAt设置为undefined。 我不知道哪里有错误，因为我在仪表板组件中定义了它。你知道哪里有错误吗？我该如何修复？我发布了我的大部分代码，也许错误在其他地方

这是我的代码：

我的dashboard.ts文件

export class DashboardComponent implements OnInit {
  appUser: User;
  clients: Client[] = [];
  today: Date = new Date(2019, 9, 25, 12, 23);     // Defualt todays time;

  @ViewChild('counter', {read: CounterComponent, static: false})
  private counter: CounterComponent;

  counterState = 'counter is ticking';
  ngOnInit() {
    this.appUser = this.userS.currentUser;
    this.clients = this.clientService.getUserClients()
    .sort((a, b) => {
      return (new Date(a.registrationDate) as any) - (new Date(b.registrationDate) as any);
    });
    this.counter.startAt = 120;   // Here I am defining it
    this.counter.counterState.subscribe((msg)=>{
      if(msg==='COMPLETE') {
        this.counterState = 'counter has stopped';
      }
    });
    this.counter.start();
  }
}

My dashboard.html文件

<counter #counter></counter>

我的Mycounter.ts文件

@Component({
  selector: 'counter',
  templateUrl: './counter.component.html',
  styleUrls: ['./counter.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class CounterComponent  {
  @Input()
  startAt:number = 1;

  @Input()
  showTimeRemaining = true;

  @Output()
  counterState = new EventEmitter();

  currentValue = '';

  private currentSubscription: Subscription;

  constructor(private changeDetector: ChangeDetectorRef) { }

  public start() {
    this.currentValue = this.formatValue(this.startAt);
    this.changeDetector.detectChanges();

    const t: Observable<number> = interval(1000);
    this.currentSubscription = t.pipe(take(this.startAt))
.pipe(  // not sure about this place but using only map but else it says 
        // Property 'map' does not exist on type 'Observable<number>'
  map(v =>    this.startAt - (v + 1))).subscribe(v => {
        this.currentValue = this.formatValue(v);
        this.changeDetector.detectChanges();
      }, err => {
        this.counterState.error(err);
      }, () => {
        this.currentSubscription.unsubscribe();
        this.currentValue = '00:00';
        this.counterState.emit('COMPLETE');
        this.changeDetector.detectChanges();
      });
  }

  private formatValue(v) {
  const minutes = Math.floor(v / 60);
          const formattedMinutes = '' + (minutes > 9 ? minutes : '0' + minutes);
          const seconds = v % 60;
          const formattedSeconds = '' + (seconds > 9 ? seconds : '0' + seconds);

  return `${formattedMinutes}:${formattedSeconds}`;
  }
}

@组件({
选择器：'计数器'，
templateUrl:“./counter.component.html”，
样式URL:['./counter.component.css']，
changeDetection:ChangeDetectionStrategy.OnPush
})
出口级反元件{
@输入（）
startAt:number=1；
@输入（）
showtimemaining=true；
@输出（）
counterState=新的EventEmitter（）；
currentValue=''；
私人认购：认购；
构造函数（私有changeDetector:ChangeDetectorRef）{}
公共启动（）{
this.currentValue=this.formatValue（this.startAt）；
this.changeDetector.detectChanges（）；
常数t：可观测=间隔（1000）；
this.currentSubscription=t.pipe（取（this.startAt））
.pipe（//不确定这个地方，但只使用地图，否则会显示
//类型“Observable”上不存在属性“map”
映射（v=>this.startAt-（v+1））。订阅（v=>{
this.currentValue=this.formatValue（v）；
this.changeDetector.detectChanges（）；
}，err=>{
此.counterState.error（错误）；
}, () => {
此.currentSubscription.unsubscribe（）；
this.currentValue='00:00'；
this.counterState.emit（'COMPLETE'）；
this.changeDetector.detectChanges（）；
});
}
私有格式值（v）{
常数分钟=数学楼层（v/60）；
常量formattedMinutes=''+（分钟数>9？分钟数：'0'+分钟）；
常数秒=v%60；
const formattedSeconds=''+（秒数>9？秒：0'+秒）；
返回`${formattedMinutes}:${formattedSeconds}`；
}
}

您可以通过两种方式解决此问题：首先，您可以使用

静态：true

使

计数器在
ngOnInit
中可用：

@ViewChild('counter', {read: CounterComponent, static: true})
private counter: CounterComponent;

通过这种方式，您将能够访问
ngOnInit
中的
计数器
变量，除非有结构性指令阻止它（例如
*ngIf
，更多关于和的信息）

第二种方法是将
计数器
代码移动到
ngAfterViewInit
（在这里，
计数器
变量将被解析，您不会得到错误）：

希望这有帮助……
嗯，这很奇怪。您正在将
计数器
定义为
静态：false
，但您试图在
ngOnInit
中访问它，它是否已定义？不应该是这样的。。。可以尝试使用
static:true
或将“计数器”代码移动到
ngAfterViewInit
。。。实际上，这正是问题所在，
计数器
未定义，您正试图设置未定义的属性
startAt
。在哪一行发生错误？如果它与注释“我在定义它”在同一行，那么你会在那里得到错误是完全有道理的。嗯，它是有效的，但在ngIf之外，它与此无关。
@ViewChild('counter', {read: CounterComponent, static: false})
private counter: CounterComponent;

ngAfterViewInit() {
    this.counter.startAt = 120;
    this.counter.counterState.subscribe((msg)=>{
      if(msg==='COMPLETE') {
        this.counterState = 'counter has stopped';
      }
    });
    this.counter.start();
}