Angular 错误类型错误：无法读取属性'；标题'；空的

我想通过以更新形式传递表值来更新firebase（实时数据库）中的数据，但它显示了一个错误=

错误类型错误：无法读取null的属性“title”

每当我尝试使用

[（ngModel）]=“product.price”

时，我的代码就会显示错误

无法读取null的属性“price”

这是我的.ts文件

import { Component, OnInit } from '@angular/core';
import { CategoryService } from 'src/app/services/category.service';
import { ProductsService } from 'src/app/services/products.service';
import { Router, ActivatedRoute } from '@angular/router';
import { take } from 'rxjs/operators';

@Component({
  selector: 'app-product-form',
  templateUrl: './product-form.component.html',
  styleUrls: ['./product-form.component.css']
})
export class ProductFormComponent implements OnInit {

  product: any = {};
  categories$;
  constructor(
    private router: Router,
    private route: ActivatedRoute,
    private categoryService: CategoryService,
    private productService: ProductsService
  ) {
    this.categories$ = categoryService.getCategories();
    let id = this.route.snapshot.paramMap.get('id');
    if (id)
      this.productService.get(id).pipe(take(1)).subscribe(p => this.product = p);

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

  ngOnInit() {
  }

<mat-grid-list cols="2" rowHeight="86%">
      <mat-grid-tile>
            <form class="example-form" #f="ngForm" (ngSubmit)="save(f.value)">
                  <mat-form-field class="example-full-width" appearance="outline">
                        <mat-label for="title">Product Name</mat-label>
                        <input matInput [(ngModel)]="product.title" name="title" type="text" id="title" required
                              #pname="ngModel">
                        <mat-error *ngIf="pname.touched"></mat-error>
                  </mat-form-field>
                  <mat-form-field class="mywidth" appearance="outline">
                        <mat-label for="price">Product Price</mat-label>
                        <input matInput ngModel name="price" type="number" id="price" #pprice="ngModel" required
                              [min]="0">
                        <mat-error style="color: red;" *ngIf="pprice.touched && pprice.invalid">field required*
                        </mat-error>
                        <span mat-button matSuffix mat-stroked-button aria-label="search">
                              <mat-icon>₹</mat-icon>
                        </span>
                  </mat-form-field>&nbsp;
                  <mat-radio-group ngModel name="subprice" #subprice="ngModel">
                        <mat-radio-button value="kg">/kg</mat-radio-button>&nbsp;
                        <mat-radio-button value="g">/g</mat-radio-button>&nbsp;
                        <mat-radio-button value="liter">/liter</mat-radio-button>
                  </mat-radio-group>
                  <mat-form-field class="example-full-width" appearance="outline">
                        <mat-label>Category</mat-label>
                        <mat-select ngModel name="category" id="category" required #cat="ngModel">
                              <mat-option>None</mat-option>
                              <mat-option *ngFor="let c of categories$ | async" [value]="c.name">{{ c.name }}
                              </mat-option>
                        </mat-select>
                        <mat-error style="color: red;" *ngIf="cat.touched && cat.invalid">field required*</mat-error>
                  </mat-form-field>
                  <mat-form-field class="example-full-width" appearance="outline">
                        <mat-label for="imageUrl">ImageUrl</mat-label>
                        <input matInput type="text" ngModel name="imageUrl" id="imageUrl" #imgUrl="ngModel">
                  </mat-form-field>
                  <button mat-raised-button type="submit" color="warn">Save</button>
            </form>
      </mat-grid-tile>
      <mat-grid-tile>
            <mat-card class="example-card">
                  <mat-card-header>
                        <mat-card-title>{{ pname.value }}</mat-card-title>
                  </mat-card-header>
                  <img mat-card-image [src]="imgUrl.value">
                  <mat-card-content>
                        <p>{{ pprice.value }} / {{ subprice.value }}</p>
                  </mat-card-content>
            </mat-card>

      </mat-grid-tile>
</mat-grid-list>

这是我的.html文件

import { Component, OnInit } from '@angular/core';
import { CategoryService } from 'src/app/services/category.service';
import { ProductsService } from 'src/app/services/products.service';
import { Router, ActivatedRoute } from '@angular/router';
import { take } from 'rxjs/operators';

@Component({
  selector: 'app-product-form',
  templateUrl: './product-form.component.html',
  styleUrls: ['./product-form.component.css']
})
export class ProductFormComponent implements OnInit {

  product: any = {};
  categories$;
  constructor(
    private router: Router,
    private route: ActivatedRoute,
    private categoryService: CategoryService,
    private productService: ProductsService
  ) {
    this.categories$ = categoryService.getCategories();
    let id = this.route.snapshot.paramMap.get('id');
    if (id)
      this.productService.get(id).pipe(take(1)).subscribe(p => this.product = p);

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

  ngOnInit() {
  }

<mat-grid-list cols="2" rowHeight="86%">
      <mat-grid-tile>
            <form class="example-form" #f="ngForm" (ngSubmit)="save(f.value)">
                  <mat-form-field class="example-full-width" appearance="outline">
                        <mat-label for="title">Product Name</mat-label>
                        <input matInput [(ngModel)]="product.title" name="title" type="text" id="title" required
                              #pname="ngModel">
                        <mat-error *ngIf="pname.touched"></mat-error>
                  </mat-form-field>
                  <mat-form-field class="mywidth" appearance="outline">
                        <mat-label for="price">Product Price</mat-label>
                        <input matInput ngModel name="price" type="number" id="price" #pprice="ngModel" required
                              [min]="0">
                        <mat-error style="color: red;" *ngIf="pprice.touched && pprice.invalid">field required*
                        </mat-error>
                        <span mat-button matSuffix mat-stroked-button aria-label="search">
                              <mat-icon>₹</mat-icon>
                        </span>
                  </mat-form-field>&nbsp;
                  <mat-radio-group ngModel name="subprice" #subprice="ngModel">
                        <mat-radio-button value="kg">/kg</mat-radio-button>&nbsp;
                        <mat-radio-button value="g">/g</mat-radio-button>&nbsp;
                        <mat-radio-button value="liter">/liter</mat-radio-button>
                  </mat-radio-group>
                  <mat-form-field class="example-full-width" appearance="outline">
                        <mat-label>Category</mat-label>
                        <mat-select ngModel name="category" id="category" required #cat="ngModel">
                              <mat-option>None</mat-option>
                              <mat-option *ngFor="let c of categories$ | async" [value]="c.name">{{ c.name }}
                              </mat-option>
                        </mat-select>
                        <mat-error style="color: red;" *ngIf="cat.touched && cat.invalid">field required*</mat-error>
                  </mat-form-field>
                  <mat-form-field class="example-full-width" appearance="outline">
                        <mat-label for="imageUrl">ImageUrl</mat-label>
                        <input matInput type="text" ngModel name="imageUrl" id="imageUrl" #imgUrl="ngModel">
                  </mat-form-field>
                  <button mat-raised-button type="submit" color="warn">Save</button>
            </form>
      </mat-grid-tile>
      <mat-grid-tile>
            <mat-card class="example-card">
                  <mat-card-header>
                        <mat-card-title>{{ pname.value }}</mat-card-title>
                  </mat-card-header>
                  <img mat-card-image [src]="imgUrl.value">
                  <mat-card-content>
                        <p>{{ pprice.value }} / {{ subprice.value }}</p>
                  </mat-card-content>
            </mat-card>

      </mat-grid-tile>
</mat-grid-list>

---

此.product

是在订阅中分配的，但是当呈现模板时，它仍然是未定义的，您应该在访问模板中的可观察值时使用异步管道，或者在产品对象上用ngIf包装使用的

product.title

。

您正在执行

获取（1）

。不确定，但我认为第一个可观测值可能是未定义的。尝试

takeuntil

，但我也建议不要使用subscribe，而是使用异步管道

需要采取以下步骤： 1.创建接口并声明所有输入参数：product.ts

   export interface Product {
      key?: string;
      title: string;
      price: number;
      etc...
}

在product.service.ts中：

getAll（）{ 返回此.db.list（“/products/”） .snapshotChanges（） .烟斗( 映射（操作=> actions.map（a=>（{key:a.payload.key，…（a.payload.val（）as{}）） ) ); }

在my.ts中，声明d并替换let id和if（），如下所示：

身份证； this.id=this.route.snapshot.paramMap.get（'id'）； if（this.id） this.productService.get（this.id） .订阅（p=>this.product=p）

---

4.试试看

我已经在.html文件中使用了异步管道，它是用来以表格形式显示firebase数据的。你没有，这是你的问题

[（ngModel）]=“product.title”

，你在设置产品对象之前使用了它。你能证明你的回答正确吗