Question

im新增为angular和Typescript。我有一个组件，这个组件有一些参数。例如；

<app-measure-card 
                date={{item.date.substring(0,11)}} 
                type={{item.type}} 
                value={{item.value}}
                time={{item.date.substring(11)}}>
</app-measure-card>

measure-card.ts;

export class MeasureCardComponent implements OnInit {

    constructor() {    }

  ngOnInit() {

  }
  @Input() date: string;
  @Input() type: string;
  @Input() value: string;
  @Input() time: string;
}`

如您所见，我得到一些值并将它们打印在我的html文件中。但我想在日期上做一些更改，但我不能。请你帮助我好吗？

Answer 1

创建一个get and set方法来监听更改

private _date: string;

@Input() 
get date(): string{
  return this_date;
}
set date(val: string) {
  this._date = val;
  // do your thing
}

Answer 2

 // use this imports  
 import { 
      Component, Input,
      OnInit,
      OnChanges, SimpleChanges, SimpleChange
    } from '@angular/core';


    export class MeasureCardComponent implements OnChanges, OnInit {
      @Input() name: string;

      constructor() {}

      ngOnChanges(changes: SimpleChanges) {
        const name: SimpleChange = changes.name;
        console.log('prev value: ', name.previousValue);
        console.log('got name: ', name.currentValue);
        this._name = name.currentValue.toUpperCase();
      }

      ngOnInit() {
        console.log(this.name);
      }
    }

Answer 3

使用角度设定器和吸气剂

private _date: string
@Input() set date(val: string) {
    // modify val
    this._date = val
}

get date(): string {
    return this._date
}

Answer 4

您只需要双向绑定。来自Angular.IO的简单示例：

import {Component} from '@angular/core';

@Component({
  selector: 'example-app',
  template: `
    <input [(ngModel)]="name" #ctrl="ngModel" required>

    <p>Value: {{ name }}</p>
    <p>Valid: {{ ctrl.valid }}</p>

    <button (click)="setValue()">Set value</button>
  `,
})
export class SimpleNgModelComp {
  name: string = '';

  setValue() { this.name = 'Nancy'; }
}

https://angular.io/api/forms/NgModel

如何对@Input-Angular附带的值进行更改

4 个答案: