我有一个有p元素的组件.它的onClick事件会将其更改为a,textarea以便用户可以编辑数据.我的问题是:
我曾尝试使用"ElementRef"和"@ViewChild()",但似乎我遗漏了一些东西:
// ------ THE CLASS
@ViewChild('tasknoteId') taskNoteRef:ElementRef;
noteEditMode: boolean = false;
get isShowNote (){
return !this.noteEditMode && this.todo.note ? true : false;
}
taskNote: string;
toggleNoteEditMode () {
this.noteEditMode = !this.noteEditMode;
this.renderer.invokeElementMethod(this.taskNoteRef.nativeElement,'focus');
}
// ------ THE COMPONENT
<span class="the-insert">
<form [hidden]="!noteEditMode && todo.note">
<textarea #tasknoteId id="tasknote"
name="tasknote"
[(ngModel)]="todo.note"
placeholder="{{ notePlaceholder }}"
style="background-color:pink"
(blur)="updateNote()" (click)="toggleNoteEditMode()"
[autofocus]="noteEditMode"
[innerHTML]="todo.note">
</textarea>
</form>
</span>
Run Code Online (Sandbox Code Playgroud)
我正在尝试创建一个组件,它将执行一些操作并循环结果集.我希望能够为循环结果集中的项目提供"模板".
例如,这是我想要的一个想法:
<search-field>
<ng-template let-item>
<span><strong>{{item.foo}}</strong></span>
<span>{{item.bar}}</span>
</ng-template>
</search-field>
Run Code Online (Sandbox Code Playgroud)
search-field组件中的内容应该用作该组件中循环结果集的每次迭代的模板.
这是search-field组件的外观:
<div class="search-container">
<div class="search-input">
<input type="text" class="form-control" placeholder="Search users..." [(ngModel)]="searchString" (ngModelChange)="searchStringChanged($event)">
<div class="md-icon">search</div>
</div>
<ul class="search-results" *ngIf="searchResults.length > 0">
<li class="search-results__item" *ngFor="let result of searchResults">
<ng-content [item]="item"></ng-content> <!-- Template should be used here on each iteration and allow to pass in "item" to use in example up above -->
</li>
</ul>
</div>
Run Code Online (Sandbox Code Playgroud)
如何将循环的每个项目传递给ng-content,以便我可以在第一个示例的代码中访问它?