angular - 无法读取未定义的属性（读取“

问题描述

我是 Angular 的新手，正在尝试做一个小项目。任何人都可以帮助我，为什么我会收到这个错误？我已经尝试过了，*ngIf但它不起作用。这是我的组件。


  ticketForm: FormGroup;
  modalOptions:NgbModalOptions;
  tickets:any = [];
  allUsers: User[];
  
  newTickets: Ticket[];

  constructor(
    private ticketService: TicketService, 
    private modalService: NgbModal,
    private ngbDateParserFormatter: NgbDateParserFormatter,
    private authService: AuthService,
    private formBuilder: FormBuilder
    ){
      this.modalOptions = {
        backdrop:'static',
        backdropClass:'customBackdrop'
    }
    this.readticket();
    this.readUser();
  }

  ngOnInit() {
    this.readUser();
    this.ticketForm = this.formBuilder.group({
      name: [''],
      status: [''],
      assignedTo: [''],
      place: [''],
      dueDate: ['']
    });
  }

  get f() { return this.ticketForm.controls; }

  createTicket() {
    this.ticketService.createticket(
      {
        name: this.f.name.value,
        status: this.f.status.value,
        assignedTo: this.f.assignedTo.value,
        place: this.f.place.value,
        dueDate: this.ngbDateParserFormatter.format(this.f.dueDate.value)
      }
    )
    .subscribe(success => {
      if (success) {
        let ticketTmp: Ticket = success
        this.tickets.push(ticketTmp)
      }
    });
  }

  readticket(){
    this.ticketService.gettickets().subscribe((data) => {
      this.tickets = data;
    })    
    this.sortTickets();
  }

  readUser() {
    this.authService.getUsers().subscribe((data) => {
      this.allUsers = data
      // -
    })
  }

  removeticket(id: any) {
    this.ticketService.deleteticket(id).subscribe((data) => {
      for(let i = 0; i < this.tickets.length; ++i){
        if (this.tickets[i]._id === id) {
            this.tickets.splice(i,1);
        }
      }
    })
  }

  open(content) {
    console.log("USERS: ", this.allUsers)
    this.readUser();
    this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'}).result.then((result) => {
      this.createTicket()
    });
  }

  sortTickets() {
    this.getNewTickets();
  }

  getNewTickets() {
    for(let i = 0; i < this.tickets.length; i++) {
      if(this.tickets[i].status === "new") {
        let ticketTmp = new Ticket(this.tickets[i]._id,this.tickets[i].place, this.tickets[i].status, this.tickets[i].assignedTo, this.tickets[i].date)
        this.newTickets.push(ticketTmp)
      }
    }
  }

这是我在 HTML 中的模态

<ng-template #content let-modal>
    <div class="modal-header">
      <h4 class="modal-title" id="modal-basic-title">Ticket Erstellen</h4>
      <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <form [formGroup]="ticketForm" (ngSubmit)="getInput()">
        <label for="dateOfBirth">Gebäude</label>
        <div class="row">
          <div class="col-md-10">
            <div class="form-group">
              <input type="text" class="form-control" formControlName="place" name="place" placeholder="z.B Gärtnerweg 46">
            </div>
          </div>
        </div>
        <label for="dateOfBirth">Ticket Name</label>
        <div class="row">
          <div class="col-md-10">
            <div class="form-group">
              <input type="text" class="form-control" formControlName="name" name="name" placeholder="z.B Heizung defekt">
            </div>
          </div>
        </div>
         <label for="dateOfBirth">Status</label>
        <div class="row">
          <div class="col-md-10">
            <div class="form-group">
              <select class="form-control form-select" aria-label="Default select example" name="status" formControlName="status">
                <option value="new">Neu</option>
                <option value="doing">Doing</option>
                <option value="done">Done</option>
              </select>
            </div>
          </div>
        </div>
        <label for="dateOfBirth">Bearbeiter</label>
        <div class="row">
          <div class="col-md-10">
            <div class="form-group">
              <select  class="form-control form-select" aria-label="Default select example" name="assignedTo" formControlName="assignedTo">
                <div *ngIf="allUsers">
                  <option *ngFor="user of allUsers" [attr._id]="user._id" >{{user.name}}</option> 
                </div>
              </select>
            </div>
          </div>
        </div>
        <label for="dateOfBirth">Eingangsdatum</label>
        <div class="col-md-10">
          <div class="form-group">
            <div class="input-group input-group-alternative">
              <div class="input-group-prepend">
                <span class="input-group-text"><i class="ni ni-calendar-grid-58"></i></span>
              </div>
              <input class="form-control datepicker" placeholder="Datum auswählen" name="dp" formControlName="dueDate" ngbDatepicker #d="ngbDatepicker" (click)="d.toggle()" type="text"/>
            </div>
          </div>
        </div> 
      </form>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-outline-dark" (click)="modal.close('save')">Save</button>
    </div>
  </ng-template>

和我的服务

 //getAll User
  getUsers(): Observable<User[]> {
    return this.http.get<User[]>(`${this.baseUri}/getUsers`)
    .pipe(map(response=> {
      if(response){
         return Object.values(response); //This will return the array of object values.
       }
       return []; // If response is null return empty array for safety.
   }));
    
  }

标签： angular

angular - 无法读取未定义的属性（读取“_id”）

问题描述

解决方案

推荐阅读