Поэтому я использую базу данных для хранения данных. и когда я ввожу данные, [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; }}