时间戳

首页 > 解决方案 > 错误 TS2339：“联系人”类型上不存在属性“n”

angular - 错误 TS2339：“联系人”类型上不存在属性“n”

问题描述

我正在尝试检测是否使用 data.n 选择了任何元素，但它给出的错误是 Property n 在类型“Contact”上不退出，所以可以做些什么来使这个删除操作起作用。我正在添加与上述问题相关的代码。

联系服务.ts。

    import { Injectable } from '@angular/core';
    import { HttpClient, HttpHeaders } from '@angular/common/http';
    import { HttpClientModule} from '@angular/common/http';
    import {Contact} from './contact';
    import {map} from 'rxjs/operators';
    import {Observable,of, from } from 'rxjs';

    @Injectable()
    export class ContactService {

      constructor(private http: HttpClient) { }

      httpHeader = {
        headers: new HttpHeaders({
          'Content-Type': 'application/json'
        })
      }  


      getContacts(): Observable<Contact[]> {
        return this.http.get<Contact[]>('http://localhost:3000/api/contacts');
      }

      addContact(newContact) : Observable<Contact[]>
      {
        return this.http.post<Contact[]>('http://localhost:3000/api/contacts', newContact);
      }
      deleteContacts(id)
      {
        return this.http.delete('http://localhost:3000/api/contact'+id)
        .pipe(map((res: Response) => res.json()));
      }
    }

联系人.component.ts

    import { Component, OnInit } from '@angular/core';
    import {ContactService} from '../contact.service';
    import {Contact} from '../contact';
    import { HttpClient, HttpHeaders } from '@angular/common/http';
    import { HttpClientModule} from '@angular/common/http';

    @Component({
      selector: 'app-contacts',
      templateUrl: './contacts.component.html',
      styleUrls: ['./contacts.component.css'],
      providers: [ContactService]
    })
    export class ContactsComponent implements OnInit {

      contacts: Contact[];
      contact: Contact;
      first_name:string;
      last_name:string;
      phone:string;
      
      constructor(private contactService: ContactService) {}

      addContact()
      {
        const newContact = {
          first_name: this.first_name,
          last_name: this.last_name,
          phone: this.phone
        }
        this.contactService.addContact(newContact)
          .subscribe(contact => {
            this.contacts.push(contact);
          });
      }

      deleteContacts(id:any)
      {
        var contacts = this.contacts;
        this.contactService.deleteContacts(id)
          .subscribe(data => {
            if(data.n==1)
            {
              for(var i = 0; i < contacts.length; i++)
              {
                if(contacts[i]._id == id)
                {
                  contacts.splice(i,i);
                }
              }
            }
          })
      }

      ngOnInit() {
        this.contactService.getContacts()
          .subscribe(contacts =>
            this.contacts = contacts);
      }

    }

联系人.component.html

    <div>
        <h2 class="page-header">Add Contact</h2>
        <form (submit) = "addContact()">
            <div>
                <label>First Name</label>
                <input type="text" [(ngModel)]="first_name" name = "first_name" class = "form-control">
            </div>
            <div>
                <label>Last Name</label>
                <input type="text" [(ngModel)]="last_name" name = "last_name" class = "form-control">
            </div>
            <div>
                <label>Phone</label>
                <input type="text" [(ngModel)]="phone" name = "phone" class = "form-control">
            </div>
            <input type="submit" class = "btn btn btn-success" value = "Add">
        </form>
    </div>
    <hr>
    <div>
        <div *ngFor = "let contact of contacts">
            <div class="list-group">
                {{contact.first_name}}
            </div>
            <div class="list-group">
                {{contact.last_name}}
            </div>
            <div class="list-group">
                {{contact.phone}}
            </div>
            <div>
                <input type="button" (click) = "deleteContacts(contact._id)" value = "Delete" class = "btn btn-danger">

            </div>
        </div>
    </div>

标签： angularmongodbserverclient

解决方案

deleteContact您可以像这样提供响应类型

  this.http.delete<{n: number}>('http://localhost:3000/api/contact'+id)

我不确定反应是什么。所以这只是一个示例。
或者您可以在组件内部设置dataas的类型。any

subscribe((data: any) => {...}

推荐阅读