Question

我想根据用户点击“编辑”显示一行，如果用户取消“编辑”，则隐藏该行。问题是，我的编辑组件是隐藏但行不是。

<tr>
    <td>
        &nbsp;
        <div class="form-group form-inline">
            <button type="button" class="btn btn-info btn-xs" (click)="initEditAufwand(aufwand)">
                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> edit
            </button>
        </div>
    </td>
</tr>
<tr *ngIf="aufwand == selectedAufwand">
    <td colspan="7">
        <aufwand-eingabe [aufwand]="selectedAufwand"></aufwand-eingabe>
    </td>
</tr>

组件模板：

<input type="button" class="btn btn-danger" value="Abbrechen" (click)="cancelAufwand()" />

组件：

export class AufwandEingabeComponent implements OnInit {
    @Input()
    aufwand: Aufwand;
    ngOnInit() {
        //TODO Task laden
    }

    cancelAufwand() {
        this.aufwand = undefined;
    }

}

如果我更改“AufwandEingabeComponent”中的值，它会在父表中更新，这样就可以了，但是设置undefined不起作用

Answer 1

对于双向绑定，您需要@Input() 和 @Output()。

HTML中的

双向绑定语法

<aufwand-eingabe [(aufwand)]="selectedAufwand"></aufwand-eingabe>

注意添加的(...)。

[aufwand]="parentField"用于向下绑定，从父级到子级
(aufwandChange)="parentField = $event"用于向上绑定，从子级到父级
[aufwand]="parentField" (aufwandChange)="parentField = $event"
或简写形式[(aufwand)]=parentField用于双向绑定

export class AufwandEingabeComponent implements OnInit {
    @Input()
    aufwand: Aufwand;

    @Output() aufwandChange:EventEmitter<Aufwand> = new EventEmitter<Aufwand>();

    ngOnInit() {
        //TODO Task laden
    }

    cancelAufwand() {
        this.aufwandChange.emit(undefined);
    }
}

@Output() aufwandChange:EventEmitter<Aufwand>是向上绑定(aufwandChange)和this.aufwandChange.emit(someValue)次传递someValue以转发给父级的必要条件。

angular2将parent设置为undefined

1 个答案: