1
まず、Angular CLI、Foundation、JqueryでAngularを学んでいます。このテーマではまだ初心者ですが、私のデータベースからは、同じカテゴリの連絡先だけを表示するフィルタを適用し、問題のない連絡先のすべての情報を表示します。しかし、私はfirebaseデータベースに新しいビジネス連絡先を作成するエラーがありますがここで定義されていないAngular CLIのプロパティ 'value'を読み取ることができません
...私のコードを
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>
...ありがとう...私はその部分を認識していない...それは私の本当に愚かだった...ありがとう –