如何向Firebase

Question

我一直在使用https://github.com/rolandjitsu/ng2-lab进行实验。

我的问题是，我希望每件衬衫都有name和amount，这可以在我的服务中看到，但是当我试着打电话时

服务中的

add(name: string, amount: string)

或

组件中的

add() { this.shirts.add(this.form.name, this.form.amount);

我收到这样的错误：

src/app/services/shirts.ts(11,14): error TS2415: Class 'Shirts' incorrectly extends base class 'FirebaseArray'.
  Types of property 'add' are incompatible.
    Type '(name: string, amount: string) => Promise<Firebase>' is not assignable to type '(data: any) => Promise<Firebase>'.

如果我只是添加这样的名称：add(name: string)，它可以工作，但我希望能够添加整个模式而不仅仅是名称值。

我意识到我可能正在做一些非常基本的错误，但我认为我已经知道我不能在add()函数中添加2个参数但我不知道如何添加所有数据。

服务/ shirts.ts

import {FirebaseArray, FirebaseArrayValue} from '../common/firebase_array';

export interface Shirt extends FirebaseArrayValue {
  createdAt: number | string;
  updatedAt: number | string;
  name: string;
  amount: string;
}

export class Shirts extends FirebaseArray {
  add(name: string, amount: string): Promise<Firebase> { // I can't add amount here, I get an error.
    return super.add(<Shirt>{
      createdAt: Firebase.ServerValue.TIMESTAMP,
      updatedAt: Firebase.ServerValue.TIMESTAMP,
      name: name,
      amount: amount // This Doesn't seem to work
    });
  }
}

ShirtComponent

class Form {
  name: string;
  amount: string;
}

@Component({
  moduleId: module.id,
  selector: 'shirt',
  encapsulation: ViewEncapsulation.Emulated,
  templateUrl: './shirt_component.html',
  styleUrls: ['./shirt_component.css'],
  directives: [
    CORE_DIRECTIVES,
    FORM_DIRECTIVES,
    ROUTER_DIRECTIVES,
    ShirtListComponent
  ]
})

export class ShirtComponent {
  form: Form = new Form();
  private _shirts: Shirts;
  constructor(@Inject(Shirts) csp: Promise<Shirts>, _client: AuthClient) {
    csp.then((cs) => this.shirts = cs);
    this._client = _client;
  }
  add() {
    this.shirts.add(this.form.name, this.form.amount); // I don't know how to load all my data here it seems to work with only one parameter "this.form.name"
    this.form.name = '';
    this.form.amount = '';
    return false;
  }
}

ShirtComponent.html表格

<form class="text-center" #shirt="ngForm" (ngSubmit)="add()" novalidate>

  <fieldset class="form-group">
    <label for="name" class="sr-only">Name/Title</label>
    <input type="text" class="form-control" id="name" name="name" ngControl="name" [(ngModel)]="form.name" placeholder="Name/Title" autocomplete="off" required>
  </fieldset>

  <fieldset class="form-group">
    <label for="amount" class="sr-only">Amount</label>
    <input type="number" class="form-control" id="amount" name="amount" ngControl="amount" [(ngModel)]="form.amount" placeholder="Amount" autocomplete="off" required>
  </fieldset>

  <button type="submit" [disabled]="!shirt.form.valid">
    <glyph src="assets/glyphs/plus.svg"></glyph>
  </button>
</form>

修改

这就是firebase_array.ts中的add（）函数看起来的样子，也许是我所缺少的部分？

/**
     * Adds a record to Firebase and returns the reference in a promise.
     * To obtain its key, use `ref.key()`, assuming `ref` is the variable assigned to the return value.
     *
     * Note that all the records stored in the array are objects.
     * Primitive values get stored as `{ value: primitive }`.
     * Moreover, each record will get a new property `key` which is used to do changes to the record (most methods require the `key`).
     *
     * @name add
     * @memberof FirebaseArray
     *
     * @param {*} data - Data to add to the array (and sync with Firebase).
     * @returns {Promise<Firebase>} A promise with a Firebase reference to the data.
     */

    add(data: any): Promise<Firebase> {
        return new Promise((resolve, reject) => {
            let key: string = this.ref.push().key();
            let ref: Firebase = this.ref.child(key);
            ref.set(transformDataToFirebaseArrayValue(data), (error) => {
                if (error) reject(error);
                else resolve(ref);
            });
        });
    }

Answer 1

似乎是TypeScript的限制，允许在子类中重写的方法。错误消息指示被重写的方法需要与子类中的方法兼容的签名，这是合理的。创建一个具有不同名称的方法

导出类Shirts扩展了FirebaseArray {   add（name：string，amount：string）：Promise {//我不能在这里添加金额，我收到错误。

export class Shirts extends FirebaseArray {
  addShirt(name: string, amount: string): Promise<Firebase> {
    return super.add(<Shirt>{
      createdAt: Firebase.ServerValue.TIMESTAMP,
      updatedAt: Firebase.ServerValue.TIMESTAMP,
      name: name,
      amount: amount // This Doesn't seem to work
    });
  }
}