Question

我已经感到困惑了......我想通过点击按钮来创建编辑元素名称的功能。所有元素都存储在Storage中。在我的案例中如何做到这一点。

file home.html

<ion-list>

<ion-item *ngFor="let place of places ; let i  = index" (click)="onOpenPlace(place)">
  <p class="list_geo"> {{ place.title }}</p>
  <ion-buttons end>
  <button ion-button color="danger" (click)="deletePlace(i)">Delete</button>

  <!-- ************* EDIT ****** does not work ************* -->
  <button ion-button class="button button-positive" (click)="showEditModalPlace(i)"><ion-icon name="create"></ion-
    icon>_Edit</button>
  <!-- ************* EDIT ****** does not work ************* -->

 </ion-buttons> 
</ion-item>

file home.ts

import { Component } from '@angular/core';
import { Storage } from '@ionic/storage';

import { ModalController, NavController } from 'ionic-angular';
import { NewPlacePage } from "../new-place/new-place";
import { PlacePage } from "../place/place";
import { PlacesService } from "../../services/places.service";
import { Place } from "../../model/place.model";
import { EditPlacePage } from '../edit-place/edit-place';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
 // places: {title: string}[] = [];
  private places: Place[] = [];

  constructor(
    private storage: Storage,
    public navCtrl: NavController,
    private placesService: PlacesService,
    private modalCtrl: ModalController) {

  }

  ionViewWillEnter() {
    this.placesService.getPlaces()
      .then(
        (places) => this.places = places
      );
  }

 <!-- ************* EDIT ****** does not work ************* -->

                  // Modal window EditPlacePage

showEditModalPlace(i) {
    console.log(i);
    this.modalCtrl.create(EditPlacePage).present();
  }
 <!-- ************* EDIT ****** does not work ************* -->

}

file edit-place.html

<form (submit)="UpdatePlace(f.value)" #f="ngForm">
    <ion-item>
      <ion-label>Edit</ion-label>
      <ion-input type="text" name="activetitle" [(ngModel)]="activetitle" required (change)="placeChange(i)"></ion-input>
    </ion-item>
    <button ion-button block type="submit" [disabled]="!f.valid">Edit Place</button>
  </form>

file edit-place.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { ViewController } from 'ionic-angular';
  import { Place } from "../../model/place.model";
  import { PlacesService } from "../../services/places.service";
  import { Router, ActivatedRouter, Params} from '@angular/router';

@IonicPage()
@Component({
  selector: 'page-edit-place',
  templateUrl: 'edit-place.html',
})
export class EditPlacePage {
    private places: Place[] = [];
        activetitle: string;

  constructor(public navCtrl: NavController, public navParams: NavParams, private viewCtrl: ViewController, private placesService: PlacesService) {
  }


/***************************** EDIT  **********************/


}

Answer 1

// Give a reference to your element
<input #myName>
@ViewChild('myName') input; 
ngAfterViewInit() {
  console.log(this.input.nativeElement.value);
}

这里我们给输入DOM元素一个本地引用（#myname），以便我们可以在ts文件中访问它。 ViewChild装饰器在@ Angular / core包中提供。它需要类类型或引用名称字符串。这里我们给出变量输入的引用名称字符串。 ngAfterViewInit（）是Angular中的生命周期钩子，在初始化视图后调用。在这个生命周期钩子中，我们将能够访问input元素（因为它已被初始化）及其所有属性。

Angular 2如何编辑元素名称？

1 个答案: