Question

我有角度4框架中的组件，看起来像这样

import { ListService } from '../list/list.service';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'view',
  template: `
  <div *ngIf="row?.id">
    <div>
      <p>{{row.id}}</p>
      <p>{{row.name}}</p>
      <p>{{row.weight}}</p>
      <p>{{row.symbol}}</p>
    </div>
  </div>
  <div *ngIf="!row">test</div> 
  <router-outlet></router-outlet>
  `,
  styles: []
})
export class ViewComponent implements OnInit {

  constructor(private route: ActivatedRoute,
    private service: ListService) {
    this.route.params.subscribe(params => {
      const id = parseInt(params['id']);
      if (id) {
        this.row = this.service.getRow(id);
        console.log(this);
      }
    });
  }

  row;

  ngOnInit() { }
  showInfo(){
      console.log(this)
  }
}

虽然第一个*ngIf="row?.id"工作得很好，但第二个表现奇怪的意思总是true，我做错了什么？

修改

当我测试它时，似乎ViewComponent没有正确更新，这意味着当我在console.log内执行constructor > after if condition时，Viewcomponent有3个属性route，service和{{1但是当我创建函数

时

row

现在showInfo(){ console.log(this) } - ＆gt; this只有2个属性ViewComponent和route

这可能是范围的一些问题吗？

Answer 1

您应该使用以下

<div *ngIf="row === undefined">test</div>

*ngIf="!row"正在检查row === false

Answer 2

*ngIf="!row"检查该行是否为假值（意为row == false，这反过来可能意味着，如果行是对象，则该行为null或undefined ）。

只要您的行不为null或未定义，此条件就为真，并且＆＃39; test＆＃39;会出现。

如果您想要对第一个*ngIf进行相反的检查，请完全否定它：

<div *ngIf="!(row?.id)">test</div>

（括号仅为清晰起见）

Angular4，无法隐藏内容

2 个答案: