как мне сбросить мои данные для моего div class = "col-md-3" - PullRequest
0 голосов
/ 07 марта 2020

Поэтому я использую базу данных для хранения данных. и когда я ввожу данные, [div class = "col-md-3]

<code>   <div class="col-md-3" style="float: right; width: 500px">
      <h2>Content from Firebase</h2>
      <pre *ngFor=

"let item of items | async">{{item.content}}

сохраняет данные, но не сбрасывается при повторном запуске HTML. Есть способ сбросить это. Я новичок в angular и узле, поэтому не уверен, как я реализую функцию. Еще лучше, если я могу добавить код прямо в HTML.

<code><div class="container-fluid" style="float: left">
  <div style="color: blue;">
    <h1>{{title}}</h1>
    <h3>{{description}}</h3>
  </div>

  <div style="width: 300px;">
    <form (ngSubmit)="onSubmit()">
      <div class="form-group">
        <label for="ProductID">Item</label>
        <input type="text" class="form-control"
               placeholder="Enter content..." id="ProductID"
               required [(ngModel)]="itemValue" name="Product">
      </div>
      <div class="form-group">
        <label for="ingredients">Item</label>
        <input type="text" class="form-control"
               placeholder="Enter content..." id="ingredients"
               required [(ngModel)]="itemValue2" name="ingredients">
      </div>
      <div class="form-group">
        <label for="Price">Item</label>
        <input type="number" class="form-control"
               placeholder="Enter content..." id="Price"
               required [(ngModel)]="itemValue3" name="Price">
      </div>
      <div class="form-group">
        <label for="stock">Item</label>
        <input type="number" class="form-control"
               placeholder="Enter content..." id="stock"
               required [(ngModel)]="itemValue4" name="stock">
      </div>
      <div class="form-group">
        <label for="health Problems">Item</label>
        <input type="text" class="form-control"
               placeholder="Enter content..." id="health Problems"
               required [(ngModel)]="itemValue5" name="health Problems">
      </div>

      <div class="btn-group">
        <button type="submit" class="btn btn-success">Submit</button>
      </div>
    </form>
  </div>


</div>


<div class="col-md-3" style="float: right; width: 500px">
  <h2>Content from Firebase</h2>
  <pre *ngFor="let item of items | async">{{item.content}}
импорт {Component, OnInit} из '@ angular / core'; импорт {AngularFireDatabase} из '@ angular / fire / database'; импорт {Observable} из 'rx js'; импорт {FormControl, FormGroup, Validators} from '@ angular / forms'; @Component ({селектор: 'app- root', templateUrl: './app.component.html', styleUrls: ['./app.component.css' ]}) класс экспорта AppComponent реализует OnInit {title = 'Angular8Firebase'; description = 'Angular -Fire-Demo'; // realtimedatabase itemValue = ''; itemValue2 = ''; itemValue3 = ''; itemValue3 = ''; itemValue4 = ''; itemValue5 = ''; itemValue6 = ''; items: Observable ; // хранилище базы данных imgSr c = '/assets/img/imgPlaceholder.jpg'; selectedImage: any = null; isSubmitted = false; // storage databaseormTemplate = new FormGroup ({caption: new FormControl ('', Validators.required), imageUrl: new FormControl ('', Validators.required),}); // конструктор realtimedatabase (publi c db: AngularFireDatabase) {this.items = db.list ('items'). valueChanges (); } // база данных реального времени onSubmit () {this.db.list ('items'). pu sh ({content: this.itemValue}); this.db.list ('items'). pu sh ({content: this.itemValue2}); this.db.list ('items'). pu sh ({content: this.itemValue3}); this.db.list ('items'). pu sh ({content: this.itemValue4}); this.db.list ('items'). pu sh ({content: this.itemValue5}); this.db.list ('items'). pu sh ({content: this.itemValue6}); this.itemValue = ''; this.itemValue2 = ''; this.itemValue3 = ''; this.itemValue4 = ''; this.itemValue5 = ''; this.itemValue6 = ''; } ngOnInit () {} // база данных хранилища showPreview (event: any) {if (event.target.files && event.target.files [0]) {const reader = new FileReader (); reader.onload = (e: any) => this.imgSr c = e.target.result; reader.readAsDataURL (event.target.files [0]); this.selectedImage = event.target.files [0]; } else {this.imgSr c = '/assets/img/imgPlaceholder.jpg'; this.selectedImage = null; }} // база данных хранилища onSubmit2 (formValue) {this.isSubmitted = true; if (this.formTemplate.value) {const filePath = 'images / $ {this.selectedImage.name} _ $ {new Date (). getTime ()}'; }} // хранилище базы данных get formControls () {return this.formTemplate.controls; }}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...