2

我一直在使用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 个参数，但我不知道如何添加所有数据。

服务/衬衫.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
    });
  }
}

衬衫组件

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);
            });
        });
    }
4

1 回答 1

1

似乎是 TypeScript 的限制，允许在子类中覆盖的方法。错误信息表明被覆盖的方法需要与子类中的方法兼容的签名，这是合理的。用不同的名称创建一个方法

export class Shirts extends 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
    });
  }
}
于 2016-02-28T12:18:14.020 回答