如何解决“无法读取未定义的属性‘标题’”答案

【问题标题】：How to fix “Cannot read property 'title' of undefined”如何解决“无法读取未定义的属性‘标题’”
【发布时间】：2020-11-17 00:15:29
【问题描述】：

我正在关注 Mosh Hamedani 教程“Angular 4：初学者到专业人士”。

我试图在尝试编辑产品时在表单中显示产品的标题。该产品存储在 Firebase 数据库中。但是，当我转到编辑表单时，我在控制台中收到此错误：

ERROR TypeError: Cannot read property 'title' of null
    at ProductFormComponent_Template (product-form.component.html:6)
    at executeTemplate (core.js:7446)
    at refreshView (core.js:7315)
    at refreshComponent (core.js:8453)
    at refreshChildComponents (core.js:7108)
    at refreshView (core.js:7365)
    at refreshEmbeddedViews (core.js:8407)
    at refreshView (core.js:7339)
    at refreshComponent (core.js:8453)
    at refreshChildComponents (core.js:7108)

这里已经有人问过这个问题：How to fix "Cannot read property 'title' of undefined"，但是我尝试了提供的解决方案，但仍然遇到同样的错误。这是我的表单的一部分：

            <div class="form-group">
                <label for="title">Title</label>
                <input #title="ngModel" [(ngModel)]="product.title" name="title" id="title" type="text" class="form-control" required>
                <div class="alert alert-danger" *ngIf="title.touched && title.invalid">
                    Title is Required.
                </div>
            </div>

这是component.ts

export class ProductFormComponent implements OnInit {
  categories$;
  product: any = {};

  constructor(
    private router: Router,
    private route: ActivatedRoute,
    private categoryService: CategoryService,
    private productService: ProductService) { 
    this.categories$ = categoryService.getCategories();

    let id = this.route.snapshot.paramMap.get('id');
    if(id) this.productService.get(id).valueChanges().pipe(take(1)).subscribe(p => this.product = p);
    console.log(this.product);
  }

  save(product){
    this.productService.create(product);
    this.router.navigate(['/admin/products']);
  }

  ngOnInit(): void {
  }

}

编辑： 我使用 firebase 作为“后端”

【问题讨论】：

您是否尝试过停止您的应用，然后使用ng serve 重新启动？有时我收到此错误只是因为我的应用无法识别我添加的变量
您好，您的 categoryService 的 getCategories 方法中有任何 API 调用吗？
@JeremyLucas 我试过了，但没有任何改变
@Ritu get categories 工作得很好，问题出在最后三行。顺便说一下 get 方法已经返回 this.db.object('/products' + productId);
你能把this.product控制台的输出贴出来

标签： angular forms firebase undefined

【解决方案1】：

它有一个简单的解决方案。显示错误是因为在初始化 html 组件时，产品还没有准备好（因为 api 调用需要一些时间来返回数据），所以它是未定义的。因此在html组件中使用?.如下所示。



    <div class="form-group">
                <label for="title">Title</label>
                <input #title="ngModel" [(ngModel)]="product?.title" name="title" id="title" type="text" class="form-control" required>
                <div class="alert alert-danger" *ngIf="title.touched && title.invalid">
                    Title is Required.
                </div>
            </div>

    ````

【讨论】：

【解决方案2】：

在产品后添加问号，表示仅在产品对象可用时才取标题，即它已经定义。

<div class="form-group"> <label for="title">Title</label> <input #title="ngModel" [(ngModel)]="product?.title" name="title" id="title" type="text" class="form-control" required> <div class="alert alert-danger" *ngIf="title.touched && title.invalid"> Title is Required. </div> </div>

【讨论】：

【解决方案3】：

使用ngIf 包装需要模型的元素可以解决问题。内容正在尝试在模型准备好之前呈现。

<ng-container *ngIf="_model">
    CONTENT HERE
</ng-container>

【讨论】：