标签: ngmodel

我已经阅读了在Angular2中测试双向绑定的文档。实际上，所有示例都很简单，也太简单了。

看来他们只测试外装...

我将发布一些代码来说明：

import { Component, Input } from "@angular/core";
import { ComponentFixture, async, TestBed, tick, fakeAsync } from 
"@angular/core/testing";
import { FormsModule } from "@angular/forms";
import { By } from "@angular/platform-browser";

@Component({
    selector: 'test',
    template: `
        <input type="text" [(ngModel)]="myValue" />
        <div>{{ myValue }}</div>
    `
})
class TestComponent {
    @Input() myValue: string
}

describe('Example', () => {
    let component: TestComponent
    let fixture: ComponentFixture<TestComponent>

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [TestComponent],
            providers: [],
            imports: [FormsModule]

        })
            .compileComponents()
    }))

    beforeEach(() => {
        fixture …

我收到一个值,我在文本字段中向用户显示.

他的想法是让他能够编辑这个值,然后将其发回.

在钱的情况下,假设我以美分存储金额,但我想以美元显示.这是我所拥有的代码的概念,显示我收到的值:

<input type="text" [(ngModel)]="myValue" value="{{myValue}}" />

我尝试了这个没有成功:

<input type="text" [(ngModel)]="myValue/100" value="{{myValue/100}}" />

如何显示该值除以100？

我刚刚在 上创建了一个空Angular项目IntelliJ，我正在尝试将一个文本框绑定到一个对象的成员。我的对象保留undefined或我在里面分配给它的任何东西OnInit。我包括FormsModule在app.module.ts，我无法让它工作。这是我的app.component.html文件：

<form #form="ngForm">
    <input type="text" name="name" id="name" [ngModel]="person.name">
    <button (click)="save()">save</button>
</form>

这是app.component.ts：

import {Component, OnInit} from '@angular/core';
import {IPerson, Person} from './model/person.model';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'my-app';
  names?: string;
  person?: IPerson;

  save() {
    console.log('::::::' + this.person.name);
  }

  ngOnInit(): void {
   this.person = new Person();
  }
}

app.module.ts：

import { BrowserModule …

我有以下角度代码：

comp.html

<select [(ngModel)]="selectedBanner" (change)="onBannerChange()">
                    <option *ngFor="let banner of banners" 
                    [ngValue]="banner">{{banner.BannerDesc}}</option>

                </select>

比较

    public banners: any[] = [
        {BannerId: 1, BannerDesc: 'AAAA'},
        {BannerId: 2, BannerDesc: 'BBBB'},
        {BannerId: 3, BannerDesc: 'CCCC'},
        {BannerId: 4, BannerDesc: 'DDDD'},
    ];
    public selectedBanner: any = {BannerId: 3, BannerDesc: 'CCCC'};
    onBannerChange() {
        console.log(this.selectedBanner);
    }

但是，在加载时，选择下拉列表始终为空白。只有当我改变时，它才会获得价值。如何在加载时设置默认值？

我正在使用角度 4.0.0

当使用ngModel从bumpDetail.name数组中获取属性get来使用冒号对象发出值时,我遇到了一些问题.

我在下面粘贴了我的代码片段.
有人可以帮我检查一下并告诉我哪里做错了吗？谢谢.

<p *ngFor="let bumpDetail of bumpDetail">
    <input type="checkbox" id="device" [(ngModel)]={{bump.bumpDetail.name}}/>
    <label for="device">{{bumpDetail.name}}</label>
</p>

 Bump[] = [{
"name": "bump_1",
"status": true
}, {
"name": "bump_2",
"status": false
 }, {
"name": "bump_3",
"status": true
}]

这是错误的.

解析器错误:插值({{}})其中表达式位于[{{bumpDetail.name}}]的第0列,在ng:///AppModule/SettingComponent.html@129:59("p*ngFor ="让bumpDetail的bumpDetail">

我正在使用 ng-select（来自“@ng-select/ng-select”的 NgSelectModule）？这是我的代码：

 <ng-container *ngFor="let validFilter of validFiltersData; let i = index" >
                <div *ngIf="validFilter.Values && validFilter.Values.length > 0" class=" filter col-md-4 ">
                        <ng-select [items]="validFilter.Values" bindLabel="Text" bindValue="ID" (change)= "onFilterValueChage($event, validFilter)" class="input-md" 
                        [(ngModel)]="validFilter.selectedValue"></ng-select>
                    </div>
            </ng-container>

validFiltersData 是一个 FilterData 数组：

export class FilterData 
{
    Name : string;
    FormattedName : string = null;
    Values : Filter[];
    selectedValue : Filter = null;
    ...
}

和过滤器：

export class Filter 
{
    public ID: number;
    public Text: string;
    ....
}

我试图将选定的值作为包含 ID 和文本的对象（过滤器），但我总是只得到 …

构建我的 angular 项目后，我收到错误：错误：未找到名称“ngModel”的导出！

我的 UI 在 docker 容器中运行

甚至不知道在哪里寻找这个。它在开发中工作正常。(ng 服务)

有任何想法吗

我有一个 JSON 对象 - 其键是随机的 - 但在本例中我将使用IdandName作为示例：

{Id: "someID", Name: "some name"}

我试图显示该对象的每个键和值 - 但允许用户使用标签编辑值<input>。

<div>
    <p *ngFor="let item of data | keyvalue">
        Key: {{item.key}}: <input [(ngModel)]="item.value">, {{item.value}}, {{data[item.key]}}</p>
</div>

当用户对输入框进行更改时，屏幕上的输入会发生更改（即item.value） - 但数据对象不会更新（即data[item.key]）。我可以使用ngModelChangeor(input)="onchange"($event, item.key)"或[(ngModel)]="data[item.key]来更新数据对象；但是，这会导致输入框失去焦点，因此一次只能更改一个字符。

我相信问题出在键值管道的某个地方 - 因为我使用预定义的键没有问题，即。<input [(ngModel)]="data.id">- 但显然因为对象内的键是随机的，我不能使用它。

那么：有没有办法使用 ngModel 来更新对象内的值。或者有没有其他方法来更新对象的值并将其显示在屏幕上和输入框中？

我有一个输入文本框，它使用 ngModel 绑定到组件类内的变量。单击按钮后，我想清除输入文本，但是更改变量值不会更改输入文本。

我已经重新分配变量并从 ChangeDetectorRef 调用 detectorChanges()，但它仍然不起作用。

这是我有的模板

<form #beaconForm="ngForm" autocomplete="off">
        <input #searchBox
               id="search-query"
               name="search-query"
               [ngModel]="inputValue"
               (ngModelChange)="searchAutocomplete($event)"
               (keydown)="onKeyDown($event, searchBox)"
               (blur)="onBlur()"
               (focus)="onFocused(searchBox.value)">
        <button color="accent" mat-mini-fab (click)="action(searchBox.value)"><mat-icon>add</mat-icon></button>
</form>

然后点击我想做的动作

private inputValue: string = "";

action(value) {
      this.inputValue = "";
      this.cd.detectChanges();
  }

我希望这会清除输入，但事实并非如此。知道我的错误在哪里吗？

有人可以帮我编写以下代码并告诉我它不起作用的原因吗？我正在从字符串数组创建一系列输入，并且希望将每个输入值绑定到字符串数组中相应的槽。似乎很标准，但我似乎没有抓住这个问题。

我尝试了以下两种情况，但 Colors 数组（=string[]）仍然为空！

<tr *ngFor="let color of Colors; let i = index;">
 <td>
  <mat-form-field>
      <input required matInput placeholder="Color ({{ i + 1}})"   [name]="'color_' + i" [(ngModel)]="color">
  </mat-form-field>
</td>
</tr>

<tr *ngFor="let color of Colors; let i = index;">
 <td>
  <mat-form-field>
   <input required matInput placeholder="Color ({{ i + 1}})"  [name]="'color_' + i" [(ngModel)]="Colors[i]">
  </mat-form-field>
</td>
</tr>