Angular 2+初始化输入值

Posted 2023-03-13

【中文标题】Angular 2+初始化输入值

【英文标题】：Angular 2+ initialize value of input

【发布时间】：2018-02-06 16:55:11

【问题描述】：

我正在尝试实现一个与包含输入的引导模式相对应的组件。输入通过[(ngModel)]="..." 连接到组件类中的变量，如果我在输入中输入文本（变量的值得到更新），这将起作用。

我想要做的是，当这个组件的show() 方法被调用时，输入应该填充作为参数传入的文本。这似乎不起作用，我不知道如何设置作为参数传入的初始文本（不使用 jQuery）。

以下是相关代码：

editdialog.component.html

<div id="edit_todo_modal" class="modal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Edit todo</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
      </div>
      <div class="modal-body">
        <p>Editing todo: currentText</p>
        <div class="row">
          <div class="col-md-12">
            <!-- THIS IS WHERE I WANT THE INITAL TEXT -->
            <input id="edit-todo-modal-input" type="text" class="form-control" [(ngModel)]="currentText">
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

editdialog.component.ts

import  Component  from '@angular/core';
import  FormsModule  from '@angular/forms';
import  ListComponent  from './list.component';
import  Injectable  from '@angular/core';

declare var jQuery : any;

@Injectable()
@Component(
  selector: 'edit-todo-dialog',
  templateUrl: './editdialog.component.html',
  styleUrls: ['./editdialog.component.css']
)
export class EditTodoDialogComponent

  currentText: string = "";
  index: number;


  /* I want to use this method to set the initial value */
  show(index: number, text: string): void 
    this.currentText = text;
    this.index = index;

    jQuery("#edit-todo-modal-input").val(this.currentText); // I don't want to use jQuery for showing the initial value, however this works
    jQuery("#edit_todo_modal").modal(); // show bootstrap modal
  

提前致谢。

更新

从这个组件调用show()方法

import  Component  from '@angular/core';
import  ListService  from './list.service';
import  OnInit  from '@angular/core';
import  EditTodoDialogComponent  from './editdialog.component';

/**
 * The main todo list component
 */

@Component(
  selector: 'list-component',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.css'],
  providers: [ListService, EditTodoDialogComponent]
)
export class ListComponent implements OnInit 

  private listService: ListService;
  private editTodoDialog: EditTodoDialogComponent;
  /* ... */


  constructor(listService: ListService, editTodoDialog: EditTodoDialogComponent) 
    this.listService = listService;
    this.editTodoDialog = editTodoDialog;
  

  ngOnInit(): void 
    this.getTodos();
  

  /* ... */

  // TO BE IMPLEMENTED

  showEditTodoDialog(index: number) : void 
    this.editTodoDialog.show(index, this.todos[index]);
  

事件是这样挂钩的：

<li class="list-group-item" *ngFor="let todo of todos; let i = index">
        <div class="todo-content">
          <p class="todo-text" (dblclick)="showEditTodoDialog(i)">
            todo
          </p>
        </div>
        <div class="todo-close">
          <button (click)="removeTodo(i)" class="btn btn-danger btn-sm">
              <i class="fa fa-remove"></i>
            </button>
        </div>
      </li>

【问题讨论】：

this.currentText = text; 应该可以工作

你在哪里调用show方法？

还有第二个组件，调用这个组件的show方法。 “父”组件的方法绑定到双击事件。

你能分享那段代码吗？

我可以问一个有点不相关的问题 - 将 '@Injectable()' 添加到组件有什么作用？

【参考方案1】：

问题是您使用componentReference 从ListComponent 调用show。

您不应该这样做在组件之间传递信息。

您应该使用@Input 和@Output 即Event Emitters 如果这些组件具有父子关系，否则最好的方法是使用Shared Services，一旦您将数据加载到另一个服务组件收到更改通知并订阅新数据。

更多关于如何使用父子link

更多关于如何使用共享服务的信息link

【讨论】：

@Input 成功了。为了将来参考，这是帮助我揭穿这一点的 API 页面。 angular.io/guide/component-interaction

【参考方案2】：

你试过value吗？：

 <input id="edit-todo-modal-input" type="text" class="form-control" [value]="currentText" ngModel>

对于对象，使用ngValue:

 <input id="edit-todo-modal-input" type="text" class="form-control" [ngValue]="currentText" ngModel>

【讨论】：

我做了：<input id="edit-todo-modal-input" type="text" class="form-control" [value]="currentText" [(ngModel)]="currentText"> 它什么也没做。如果我删除 ngModel 属性，模型不会在输入时更新

你试过这个 - <input id="edit-todo-modal-input" type="text" class="form-control" [value]="currentText" ngModel> ？最后注意ngModel。它应该创建一个 FormControl 实例，您可以从中操作用户插入的值

我复制粘贴了这个。会发生什么，它不仅没有设置默认值，而且似乎也没有更新模型：我没有看到输入上方的输入值（注意输入上方的<p>currentText</p>）