Question

我正在尝试实现一个对应于包含输入的Bootstrap模式的Component。输入通过[(ngModel)]="..."挂钩到Component类中的变量。如果我在输入中输入文本（变量的值得到更新），则此方法有效。

我想要做的是，当调用此组件的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>

Answer 1

问题是您使用jQuery('.sortable').sortable({ placeholder: "ui-state-highlight", connectWith: ".sortable" });从show拨打ListComponent。

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

你应该使用componentReference和@Input i：e @Output如果这些组件有父子关系，那么最好的方法是去Event Emitters将数据加载到服务中，其他组件会收到更改通知并订阅新数据。

有关如何使用父子link

的更多信息

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

Answer 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>

Angular 2+初始化输入值

2 个答案: