8

angular 6にng-selectを使用しています。

これは HTML 側です。

        <ng-select [(ngModel)]="client.categoryId"
                   class="form-control"
                   [ngClass]="{'is-invalid':clientCategoryId.errors && clientCategoryId.touched}"
                   #clientCategoryId="ngModel"
                   name="categoryId"
                   [addTag]="addTagNow"
                   required>
          <ng-option *ngFor="let cat of cats" [value]="cat.id">{{cat.title}}</ng-option>
        </ng-select>

そして、これはタイプスクリプトです：

nCategory: Category = {
  title: ''
};

constructor(public afs: AngularFirestore) {
  this.categoriesCollection = this.afs.collection('categories', ref => ref.orderBy('title', 'asc'));
}

addTagNow(name) {
  this.nCategory.title = name;
  this.categoriesCollection.add(this.nCategory);
}

これはエラーです：

NgSelectComponent.html:91 ERROR TypeError: Cannot set property 'title' of undefined at NgSelectComponent.push../src/app/components/edit-client/edit-client.component.ts.EditClientComponent.addTagNow [as addTag] (edit-client.component.ts:169)

関数の外でコードを実行すると、AddTagNow完全に正常に動作します。

どうすればそのコードを実行できますか?

4

2 に答える 2

12

オブジェクト メソッドへの参照を渡していますが、値thisが設定されていません。bind(this)したがって、関数参照が必要です。

public addTagNowRef: (name)=>void;

constructor(public afs: AngularFirestore) {
  this.categoriesCollection = this.afs.collection('categories', ref => ref.orderBy('title', 'asc'));
  this.addTagNowRef = this.addTagNow.bind(this);
}

次に、そのプロパティをテンプレートで使用します。

<ng-select [(ngModel)]="client.categoryId"
           class="form-control"
           [ngClass]="{'is-invalid':clientCategoryId.errors && clientCategoryId.touched}"
           #clientCategoryId="ngModel"
           name="categoryId"
           [addTag]="addTagNowRef"
           required>
  <ng-option *ngFor="let cat of cats" [value]="cat.id">{{cat.title}}</ng-option>
</ng-select>

または、アロー関数を使用して呼び出しをメソッドに転送することもできます。

public addTagNowRef: (name)=>void;

constructor(public afs: AngularFirestore) {
  this.categoriesCollection = this.afs.collection('categories', ref => ref.orderBy('title', 'asc'));
  this.addTagNowRef = (name) => this.addTagNow(name);
}

ここでのポイントはthis、コンポーネントを参照する必要があるということです。

于 2018-08-01T20:50:31.150 に答える