无法读取未定义的Angular CLI的属性“值”

首先，我正在使用Angular CLI，Foundation和Jquery学习Angular，所以我仍然是这个主题的新手，它的部分工作原理是，我可以从数据库中获取信息，应用过滤器仅显示联系人，他们具有相同的类别，并且显示联系人的所有信息而没有任何问题...但是我在为我的Firebase数据库创建新的业务联系人时出错，但是当我尝试提交时显示此错误：

EXCEPTION: Error in ./AppComponent class AppComponent - inline template:194:6 caused by: Cannot read property 'value' of undefined

而且我不明白为什么会这样...

这是我的代码：

从firebaseService中：

import { Injectable } from '@angular/core';
import { AngularFire, FirebaseListObservable } from 'angularfire2';
import 'rxjs/add/operator/map';
import { Business } from '../business';
import { Category } from '../category';

@Injectable()
export class FirebaseService {
    business: FirebaseListObservable<Business[]>;
    categories: FirebaseListObservable<Category[]>;

    constructor(private _af: AngularFire) {
    }

    getBusiness(categories: string = null){
        if(categories != null && categories != '0'){
            this.business = this._af.database.list('/business', {
                query: {
                    orderByChild: 'category', 
                    equalTo: categories
                }
            }) as FirebaseListObservable<Business[]>
        }else{
            this.business = this._af.database.list('/business') as FirebaseListObservable<Business[]>
        }
        // this.business = this._af.database.list('/business') as FirebaseListObservable<Business[]>
        return this.business;
    }

    getCategory(){
        this.categories = this._af.database.list('/categories') as FirebaseListObservable<Category[]>
        return this.categories;
    }

    //this part it doesn't send the new contact     
    addBusinessContact(newbusiness){
        return this.business.push(newbusiness);
    }
}

并从app.component.ts中：

    import { Component, OnInit } from '@angular/core';
import { AngularFire, FirebaseListObservable } from 'angularfire2';
import { FirebaseService } from './services/firebase.service';
import { Business } from './business';
import { Category } from './category';

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

  constructor(private _firebaseService: FirebaseService) {

  }
  busiRes: Business[];
  cateRes: Category[];
  FilterBusiness: Business[];

  appState: string;
  activeKey: string;

  ngOnInit() {
    this._firebaseService.getBusiness().subscribe(busi => {
      console.log(busi);
      this.busiRes = busi;

    });
    this._firebaseService.getCategory().subscribe(cate => {
      console.log(cate);
      this.cateRes = cate;
    });
  }

  changeState(state, key) {
    console.log("Changing state to: " + state);
    if (key) {
      console.log("Changing Key: " + key);
      this.activeKey = key;
    }
    this.appState = state;
  }

  filterCategory(category) {
    this._firebaseService.getBusiness(category).subscribe(busi => {
      console.log(busi);
      this.busiRes = busi;
    });
  }

  addBusiness(
    company: string,
    category: string,
    years_in_business: string,
    description: string,
    phone: string,
    email: string,
    street_address: string,
    state: string,
    zpicode: string) {

    var created_at = new Date().toString();
    var newBusinessContact =  {
      company: company,
      category: category,
      years_in_business: years_in_business,
      description: description,
      phone: phone,
      email: email,
      street_address: street_address,
      state: state,
      zpicode: zpicode,
      created_at: created_at
    };
    console.log(newBusinessContact);

    this._firebaseService.addBusinessContact(newBusinessContact);

  }

}

app.component.html

    <div class="top-bar">
  <div class="row">
    <div class="top-bar-left">
      <ul class="menu">
        <li class="menu-text">BusinessContacts</li>
      </ul>
    </div>
    <div class="top-bar-right">
    </div>
  </div>
</div>
<br>
<div class="row">
  <div class="large-6 columns">
    <button class="button" (click)="changeState('add')">Add Business</button>
  </div>
  <div class="large-6 columns">
    <label>
      Filter category
      <select (change)="filterCategory(filteredCategory.value)" #filteredCategory>
        <option value="0">Select</option>
        <option *ngFor="let category of cateRes" value="{{category.name}}">{{category.name}}</option>
      </select>
    </label>
  </div>
</div>
<!--in this part it helps to show/hide the extra content of the contacts, 
when the user selects the contact it appears a new window to show the 
information of the contact-->
<div *ngIf="appState == 'extend'">
  <div class="row">
    <div class="large-12 columns">
      <button class="button alert" (click)="changeState('default')">Go Back</button>
    </div>
  </div>
  <!--it show all the extra information of the contact from the database-->
  <div *ngFor="let busine of busiRes">
    <div *ngIf="busine.$key == activeKey">
      <div class="row">
        <div class="large-5 columns large-offset-1">
          <h3>
            {{busine.company}}
          </h3>
          <p>
            Category: {{busine.category}}
          </p>
          <p>
            Years in Business: {{busine.years_in_business}}
          </p>
          <p>
            {{busine.description}}
          </p>
        </div>
        <div class="large-5 columns large-offset-1">
          <h3>
            Contact Info
          </h3>
          <p>
            Phone: {{busine.category}}
          </p>
          <p>
            Email: {{busine.email}}
          </p>
          <p>
            Street Address: {{busine.street_address}}
          </p>
          <p>
            City: {{busine.city}}
          </p>
          <p>
            State: {{busine.state}}
          </p>
          <p>
            ZipCode: {{busine.zpicode}}
          </p>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- /////////////////////////////////////////ERROR///////////////////////////////////////// -->
<!-- /////////////////////////////////////////ERROR///////////////////////////////////////// -->
<!-- /////////////////////////////////////////ERROR///////////////////////////////////////// -->
<!-- form to create a new business contact to the firebase-->
<div *ngIf="appState == 'add'">
  <div class="large-12 columns">
    <h3>
      Add Business
    </h3>
    <form (submit)="addBusiness(
        company.value,
        category.value,
        years_in_business.value,
        description.value,
        phone.value,
        email.value,
        street_address.value,
        state.value,
        zpicode.value
      )">
      <div class="row">
        <div class="large-6 columns">
          <label> Company
            <input type="text" placeholder="Company Name" #company>
          </label>
        </div>
        <div class="large-6 columns">
          <label>
            Category
            <select #category>
              <option value="0">Select</option>
              <option *ngFor="let category of cateRes" value="{{category.name}}">{{category.name}}</option>
            </select>
          </label>
        </div>
      </div>
      <!---->
      <div class="row">
        <div class="large-6 columns">
          <label> Years in Business
            <input type="text" placeholder="Years in Business" #years_in_business>
          </label>
        </div>
        <div class="large-6 columns">
          <label>
            <textarea #description></textarea>
          </label>
        </div>
      </div>
      <!---->
      <div class="row">
        <div class="large-6 columns">
          <label> Phone
            <input type="text" placeholder="Company Name" #company>
          </label>
        </div>
        <div class="large-6 columns">
          <label>
            Email
            <input type="text" placeholder="Email" #email>
          </label>
        </div>
      </div>
      <!---->
      <div class="row">
        <div class="large-6 columns">
          <label> Street Address
            <input type="text" placeholder="Company Name" #company>
          </label>
        </div>
        <div class="large-6 columns">
          <label>
            State
            <input type="text" placeholder="State" #state>
          </label>
        </div>
      </div>
      <!---->
      <div class="row">
        <div class="large-6 columns">
          <label> Street Address
            <input type="text" placeholder="Zip Code" #zpicode>
          </label>
        </div>
      </div>
      </form>
  </div>
  <div class="row">
    <div class="large-12 columns">
      <input type="submit" class="button" value="Submit"> <!-- error -->
    </div>
  </div>
</div>
<!-- /////////////////////////////////////////END ERROR///////////////////////////////////////// -->
<!-- /////////////////////////////////////////END ERROR///////////////////////////////////////// -->
<!-- /////////////////////////////////////////END ERROR///////////////////////////////////////// -->
<!--it show all the business contacts from the firebase in only company, category and phone-->
<div class="row">
  <div class="large-12 columns">
    <div *ngIf="busiRes">
      <table>
        <thead>
          <tr>
            <th>Company</th>
            <th>Category</th>
            <th>Phone</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let busin of busiRes">
            <td>
              {{busin.company}}
            </td>
            <td>
              {{busin.category}}
            </td>
            <td>
              {{busin.phone}}
            </td>
            <td>
            <!-- when is clicked it shows a window to show all information of the contact -->
              <button class="button" (click)="changeState('extend', busin.$key)">More</button>
              <button class="button secondary">Edit</button>
              <button class="button alert">Delete</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>