[英]How to update tab component after submit
`I have an Angular 6 app using Bootstrap JS Tab. `我有一个使用Bootstrap JS Tab的Angular 6应用程序。 One of my tabs contains a list of notes.
我的一个标签包含一个笔记列表。 The user adds a note through a modal popup, and the list is refreshed with the new note.
用户通过模态弹出窗口添加注释,并使用新注释刷新列表。 That works fine.
这很好。 However, in the header of the tab, I have an anchor tab reflecting the number of notes entered.
但是,在选项卡的标题中,我有一个反映输入的注释数量的锚点选项卡。 My question is, how can update that number when a new note is added?
我的问题是,添加新笔记时如何更新该编号?
The app is arranged as so: There is a user-details.component.html
that displays all the tabs. 该应用程序的安排如下:有一个
user-details.component.html
显示所有选项卡。 The notes tab is contained inn user-notes.component.html
and there's a user-notes.component.ts
(posted below). notes选项卡包含在
user-notes.component.html
并且有一个user-notes.component.ts
(在下面发布)。
For example, here's the html of some of the tabs in user-detail.component.html
: 例如,这是
user-detail.component.html
中某些选项卡的html:
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li class="active"><a href="#entitlements" data-toggle="tab" [class.disabled]="isEntitlementTabDisabled">Entitlements</a></li>
<li><a href="#payment_instruments" data-toggle="tab" style="display: none">Payment Instruments</a></li>
<li><a href="#notes" data-toggle="tab" >Notes ({{_notes.length}})</a></li> <!--style="display: none" -->
</ul>
Notice that the "Notes" link references {{_notes.length}}
. 请注意,“Notes”链接引用
{{_notes.length}}
。 I need to update _notes.length
when I post, but I'm totally unsure how. 我
_notes.length
时需要更新_notes.length
,但我完全不确定如何。 Can someone help? 有人可以帮忙吗?
EDIT: Here's my component code: 编辑:这是我的组件代码:
import { AuthGuard } from '../../service/auth-guard.service';
import { Router } from '@angular/router';
import { Logger } from './../../service/logger.service';
import { Component, OnInit, Input } from '@angular/core';
import { UserDetailService } from '../../user/service/user-detail.service';
import { UserEntitlementService } from '../../user/service/user-entitlement.service';
import { Note } from '../../user/model/note.model';
import { NgForm } from '@angular/forms';
@Component({
selector: 'app-notes-component',
templateUrl: './user-notes.component.html'
})
export class UserNotesComponent implements OnInit {
@Input() asRegIdofUser;
@Input()
private notesModel: Note[]=[];
private actionResult: string;
private notesCount: number;
private currentNote: Note;
constructor(private _logger: Logger, private _userDetailService: UserDetailService,
private _router: Router, private _userEntitlementService: UserEntitlementService,
private authGuard: AuthGuard) {
}
ngOnInit(): void {
//read data....
this.currentNote= new Note();
if (this.asRegIdofUser)
this.refreshNotesData();
}
refreshNotesData(){
this.actionResult='';
this._userDetailService.getNotes(this.asRegIdofUser).subscribe(
responseData =>{
let embedded = JSON.parse(JSON.stringify(responseData));
let notes = embedded._embedded.note
this.notesModel=[];
notes.forEach(note => {
this.notesModel.push(note);
})
this.notesCount=this.notesModel.length;
},
error =>{
this._logger.error("error on loading notes "+error);
}
)
this.currentNote= new Note();
}
onCreateNote(notesModal){
this._userDetailService
.postNote(this.asRegIdofUser,this.currentNote).subscribe(
response => {
if (response==='OK')
this.actionResult='success';
else
this.actionResult='failure';
},error => {
this.actionResult='failure';
}
)
}
userHasEditRole(): boolean{
return this.authGuard.hasAccess('edituserdetails');
}
onDelete(noteId: string){
let deleteNoteId: number = Number.parseInt(noteId);
this._userDetailService.deleteNote(this.asRegIdofUser,deleteNoteId).
subscribe(
response =>{
if(response == 'OK')
this.refreshNotesData();
},
error =>{
this._logger.error("error on deleting notes "+error);
}
)
}
}
Here you are trying to communicate between different angular components. 在这里,您尝试在不同的角度组件之间进行通信。 For this, You can use a service or listen to an event emitted from the component that adds the note.
为此,您可以使用服务或侦听从添加注释的组件发出的事件。
You can find more info here: component-interaction 您可以在此处找到更多信息: 组件交互
Create a DataService, that will have your private
listOfItems
, a private
BehaviorSubject
that can be used to notify other components about changes in the list
and the same, exposed as a public
Observable
. 创建一个DataService,它将包含您的
private
listOfItems
,一个private
BehaviorSubject
,可用于通知其他组件有关list
更改以及public
Observable
public
更改。
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
@Injectable()
export class DataService {
private listOfItems: Array<string> = [];
private list: BehaviorSubject<Array<string>> = new BehaviorSubject<Array<string>>(this.listOfItems);
public list$: Observable<Array<string>> = this.list.asObservable();
constructor() { }
addItemToTheList(newItem: string) {
this.listOfItems.push(newItem);
this.list.next(this.listOfItems);
}
}
Inject this service in all the three Components, the Header
, Add
and List
. 在所有三个组件(
Header
, Add
和List
注入此服务。 And use it accordingly. 并相应地使用它。
Here's a Working Sample StackBlitz for your ref.
这是你的参考的工作样本StackBlitz 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.