Html 使用typescript将输入值写入firebase

我不熟悉棱角和打字。我试图弄清楚如何使用AngularJS和Typescript从firebase的输入中获取值。我一直在学习很多教程，但我似乎无法让它工作，除非我硬编码的值

这是我的HTML

<div class="panel panel-info">
  <div class="panel-heading">
    <div class="panel-body">
    <form (ngSubmit)="onSubmit(f)" #f="ngForm">
      <!--Form Starts Here-->

      <div class="form-group col-xs-12"> 
        <div id="nameOfProp" class="form-group">
          <label for="nameOfProp">1. Name of Proposal:</label>
            <input
              class="form-control"
              id="nameOfPropInput"
              name="nameOfProp"
              placeholder="Name of Proposal"
              type="text"
              ngModel
              required
              #nameOfProp
            />
        </div>
      </div>
<div class="form-group col-xs-12"> 
        <div id="tradingAs" class="form-group">
          <label for="tradingAs">Trading as:</label>
          <input
            class="form-control"
            id="tradingAsInput"
            name="tradingAs"
            placeholder="Trading as..."
            style="margin-bottom: 5px"
            type="text"
            ngModel
            required
          />
        </div>
      </div>
<div class="row">
  <div class="form-group">
    <button
      class="btn btn-primary"
      type="submit"
      [disabled]="!f.valid "
      required
    >Submit</button>
</form>
</div>
</div>
</div>

不确定这是否正确，但我也尝试创建一个数据模型

export class OneData {
  public nameOfProp: string;
  public tradingAs: string;

  constructor(nameOfProp: string, tradingAs: string) {
    this.nameOfProp = nameOfProp;
    this.tradingAs = tradingAs;
  }
}

连接firebase和post的gpl服务

从“@angular/core”导入{Injectable}； 从'@angular/Http'导入{Http}

@Injectable()
export class GplService {
  constructor(private http: Http) {}
  storeGpl(oneData: any []) {
    return this.http.post('https://satibgpl.firebaseio.com/gpldata.json', oneData);

  }
}

同样，我需要知道如何将html中的值传递给组件，而不是硬编码。

---

谢谢大家。

什么是

gplService

您的Firebase代码在哪里？gpl服务是Firebase post服务，用于在Firebase数据库中存储数据，主post updatedOk。错误是什么？没有错误，我想从HTML中的输入字段中获取输入，并将数据写入firebase，相反，我得到的是写入数据库的'nameofp'和'tradingAs'，而不是我在输入中键入的内容组件中有“NameOfPro”和“tradingAs”（如果我将NameOfPro更改为其他任何内容，该值将写入firebase）什么是

gplService

，您的firebase代码在哪里？gpl服务是firebase post服务，用于在firebase数据库中存储数据，主post updatedOk。错误是什么？没有错误，我想从HTML中的输入字段中获取输入，并将数据写入firebase，相反，我得到的是写入数据库的'nameofp'和'tradingAs'，而不是我在输入中键入的内容nameOfProp'和'tradingAs'在组件中（如果我将nameOfProp更改为其他任何内容，该值将写入firebase）

@Injectable()
export class GplService {
  constructor(private http: Http) {}
  storeGpl(oneData: any []) {
    return this.http.post('https://satibgpl.firebaseio.com/gpldata.json', oneData);

  }
}