Ionic 2/angular 2 - 如何在组件中添加Typescript的HTML元素？

请不要以标题来评判，先阅读帖子。Ionic 2/angular 2 - 如何在组件中添加Typescript的HTML元素？

我刚开始学习使用离子2框架的typescript和angular 2。

我加入的HTML元素引用typscript变量“的newitem”，像这样：

<ion-content> 
    <ion-list inset> 
    <ion-item *ngFor="let item of todos" (click)="edit(item)"> 
     {{item}} 
    </ion-item> 
    <ion-item>test</ion-item> 
    <div [innerHTML]=newItem></div> 
    </ion-list> 
</ion-content>

在我的打字稿类我有一个函数addTodo（）的组件，它设置为HTML“的newitem”当pluss /在右上角添加图标按：

addTodo(){ 
    this.newItem = "<ion-item>test</ion-item>"; 
    }

出于某种原因，‘离子项目’标签上编译忽略，它只是插入‘测试’的div元素。

的机应用将是这样的：

组件类：

于是，我把它添加到视图：

<form *ngIf="editedItem"> 
    <ion-item><input [(ngModel)]="newItem" name="newItem"> 
    <ion-buttons end> 
     <button ion-button color="danger" (click)="btnCancel()">Cancel</button> 
     <button ion-button color="secondary" (click)="btnAdd()">Add</button> 
    </ion-buttons> 
    </ion-item> 
</form>

但现在当我点击取消或添加，页面需要重新加载。我知道我做错了[（ngModel）] =“newItem”，我应该尝试将Angular变量传递给模型还是有更好的方法来做到这一点。

编辑：将变量传递给（click）函数，如下面@JoeriShoeby的答案所示。

在模型：

export class TodosPage { 

newItem = ""; 
todos: string[] = this.getTodos(); 
editedItem: boolean = false; 

    constructor(public navCtrl: NavController) { 

    } 

    addTodo(){ 
    this.editedItem = true; 
    } 

    btnAdd(){ 
    this.todos.push(this.newItem); 
    this.editedItem = false; 
    } 

    btnCancel(){ 
    this.editedItem = false; 
    } 

    getTodos(): string[]{ 

    return ["item 1", "item 2"]; 
    } 
}

来源

2016-10-03 Kevin Frostad

你能提供给我你的组件类？您实际上需要将新的项目对象推入'todos'数组中。不是html – JoeriShoeby

我已经将组件类添加到帖子中。我想我可能只是更新数组，但我希望新项目能够输入数据，并且有用于保存和取消的按钮。我想也许我可以为addTodo（）内容创建一个新组件。但我不知道如何动态地添加一个功能的组件。 –

给我一个小时，然后我有一台电脑来编码给你解释 – JoeriShoeby

你的HTML文件

// Your plus-icon in your header bar 
<button (click)='toggleNew == true'> 
    <ion-icon name='plus'></ion-icon> 
</button> 

// Your content 
<ion-content> 

    <ion-list inset> 
    <ion-item *ngFor="let item of todos" (click)="edit(item)"> 
     {{item}} 
    </ion-item> 
    </ion-list> 

    <ion-item *ngIf='toggleNew'> 
     <ion-input [(ngModel)]='newItem' placeholder="Task .. "></ion-input> 
     <button (click)='saveNew(newItem)'>Save</button> 
     <button danger (click)='cancelNew()'>Cancel</button> 
    </ion-item> 
</ion-content>

你的组件

// Initalial values. 
newItem: string = ""; 
toggleNew: boolean = false; 

// Saving function 
saveNew(newItem: string): void { 
    this.todos.push(newItem); 
    this.toggleNew = false; 
    this.newItem = ""; 
} 

// Cancel function 
cancelNew(): void { 
    this.toggleNew = false; 
    this.newItem = ""; 
}

来源

2016-10-03 21:03:57 JoeriShoeby

这样的魅力，看起来不错。除了现在按钮不会显示出来。你有没有看到他们？我尝试使用标签而没有。 –

在标签内创建一个按钮，并在该按钮内对应的图标/文本 – JoeriShoeby

给我一个错误，页面将不会加载。也许这是离子1而不是2？控制台输出：未处理的Promise拒绝：模板解析错误： 'ion'不是已知元素： –

Ionic 2/angular 2 - 如何在组件中添加Typescript的HTML元素？

回答

相关问题