错误 TS2339：类型“{}”上不存在属性“标题”答案

【问题标题】：error TS2339: Property 'title' does not exist on type '{}'错误 TS2339：类型“{}”上不存在属性“标题”
【发布时间】：2021-06-22 04:49:09
【问题描述】：

我正在尝试从 firebase 数据库中获取产品数据并在浏览器中显示其属性。我最初将product 对象定义为空，当我从firebase 获取数据然后使用[(ngModel)]="product.title" 之类的两种方式绑定来显示它时。但得到上述错误。请帮忙。

product.service.ts


    getProduct(productId){
        return this.db.object('/products/' + productId ).valueChanges();
      }
    }

product-form.component.ts

    export class ProductFormComponent implements OnInit{
    
      categories$;
      product={};
    
      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.getProduct(id).pipe(take(1)).subscribe(p => this.product = p);
        
      }

product-form-component.html


    <div class = "row">
        <div class="col-md-6">
            <form #f="ngForm" (ngSubmit)="save(f.value)">
                <div class="mb-3">
                    <label for="title" class="form-label">Title</label>
                    <input #title="ngModel" [(ngModel)]="product.title" name="title" 
                    type="text" class="form-control" placeholder="Name of the Product" 
                    id="title"  required> <!--  Error [(ngModel)]="product.title" , Property 'title' does not exist on type '{}'-->
                    
                    <div class="alert alert-danger" *ngIf="title.touched && title.invalid">
                        Title is required        
                    </div>
                </div>

【问题讨论】：

欢迎来到 Stack Overflow。与那里的许多论坛不同，我们希望提问者多一点。获取tour 并阅读How to Ask 以了解这些期望是什么。首先是这些期望；研究。 A search for TS2339 on SO found about 1933 results。请先浏览这些内容，看看是否有任何回答您的问题。
是的，我检查过类似的问题答案，但它并没有解决我的问题。所以，所以我问了这个问题
试试这个[(ngModel)]="product?.title"
不工作，解析器错误：'?.'运算符不能在赋值中使用

标签： angular typescript

【解决方案1】：

您已将类型定义为any。更好的方法是定义类型或简单地让 typescript 推断类型，例如

    export class ProductFormComponent implements OnInit{
    
      categories$ = categoryService.getCategories();
      product = {
        title: ''
      }
    
      constructor(
        private router: Router,
        private route :ActivatedRoute,
        private categoryService: CategoryService,
        private productService:ProductService) {
    
        let id = this.route.snapshot.paramMap.get('id'); 
        if (id) {
          this.productService.getProduct(id).pipe(
             take(1)
           ).subscribe(p => this.product = p);
        }
        
      }

【讨论】：

我的产品对象中有更多属性，例如我从 firebase 获取的标题，并对我的产品对象进行了一些更改，但得到了同样的错误
这行你改了吗subscribe(p => this.product = p);
你能复制粘贴整个错误并分享

【解决方案2】：

为产品对象创建一个接口并将类型添加到product变量

interface Product {
  title: string
  // otherProps: string
}

export class ProductFormComponent implements OnInit {
  categories$ = categoryService.getCategories();
  // added a definite assertion telling TS that it will be assigned before access
  private product!: Product
  constructor(
    private router: Router,
    private route :ActivatedRoute,
    private categoryService: CategoryService,
    private productService:ProductService
  ) {
      let id = this.route.snapshot.paramMap.get('id'); 
      if (id) {
        this.productService.getProduct(id).pipe(
          take(1)
        ).subscribe(p => this.product = p);
      }
  }
}

【讨论】：

错误：“ProductFormComponent”类型上不存在属性“产品”。
@codeBreaker 你在哪一行得到错误