Question

我试图在用户没有从下拉菜单中选择一个选项时显示一条消息，我已设法让它工作但是我希望它只显示在您单击按钮而不是显示它的元素上一切都在同一时间。

问题是，如果我点击Test 1，我只能点击ngFor内的Test 2数据，反之亦然，我该如何显示错误讯息？

ngFor的数据只是一个样本json来说明我的问题。

this.data= [
  {
    'name': 'Test 1',
    'id': '1',
    'img' 'http://placehold.it/350x150',
    "size": ['4', '4.5', '5', '5.5', '6', '6.5', '7', '7.5']
  },
  {
    'name': 'Test 2',
    'id': '2',
    'img' 'http://placehold.it/350x150',
    "size": ['4', '4.5', '5', '5.5', '6', '6.5', '7', '7.5']
  }
]

组件功能代码，用于确定用户是否在下拉菜单中选择了无。

xdMessage: Boolean = false;
showError (size) {
 if(size == '0') {
   this.xdMessage = true;
   console.log(size);
   // show message string error message
 } else {
   console.log(size);
   this.errMessage = false;
   //show OK string message
 }
}

模板视图 -

<div class="col-sm-6" *ngFor="let x of data"> 
    <h2 class="pull-left"> {{ x.name }}</h2>
    <button class="pull-right" (click)="showError(selectSizeCtrl.value);"> Show Message </button>
    <p *ngIf="selectSizeCtrl.value == '0' && !!xdMessage "> Select a size! Error Message! </p>
    <select name="" id="size" class="form-control" #selectSizeCtrl ngControl="selectSizeCtrl">
        <option value="0">Select Id</option>
        <option *ngFor="let xd of x.size" [value]="xd"> {{ xd }}</option>
    </select>
    <img src="{{ x.img }}" alt="" class="img-responsive">
  </div>

也许我的例子会更好地解释我的情况。 Plnkr sample

Answer 1

根据您的代码，单击按钮时会触发showError()函数，因为两者都在同一组件中共享。因此，两个测试都会相应地生成结果。

您应该为两个数据创建一个嵌套组件，以便每个测试都有分离的组件。

在app.ts上的

，您应该将所有数据传递给另一个组件，例如根据您的代码，这是模板，

<div class="container">
   <h2>Hello {{name}}</h2>
   <my-nested-app *ngFor="let x of data" [x]="x"></my-nested-app>
</div>

此代码将创建使用my-nested-app选择器和每个x数据的分离组件。

[x]="x"表示您将要使用的所有x传递给另一个组件，然后您应该创建一个新组件。对于我的示例，我创建了src/nested.ts，其中每个x输入都有my-nested-app个选择器，

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

@Component({
  selector: 'my-nested-app'

在模板中，您可以将您正在使用的模板放在*ngFor div中并在类中，使用x获取@Input()变量并放置所有函数。

export class NestedComponent {
  @Input() x;
  xdMessage: Boolean = false;

  showError (size) {
    if(size == '0') {
      this.xdMessage = true;
      console.log(size);
      // show message string error message
    } else {
      console.log(size);
      this.errMessage = false;
      //show OK string message
    }
  }
}

返回src/app.ts导入NestedComponent类并将其放入声明中，

import {NestedComponent} from './nested'

@NgModule({
  ...
  declarations: [ App, NestedComponent ],
  ...
})

您可以在此处查看示例代码Plunkr Example

Answer 2

不知道你的整个用例，所以这可能不是一个合适的解决方案，但可能是。所以我们可以在x中引入一个新属性，比如名为clicked。因此，我们有条件地仅显示x clicked属性为true的消息。因此，在x - 函数中传递showError并将其修改为以下内容：

showError (size, x) { 
  for(let i=0; i< this.data.length; i++){
    this.data[i].clicked= false; // set all other to false;
  }
  x.clicked = true; // chosen is true

  if(size == '0') {
    this.xdMessage = true;
    console.log(size);
    // show message string error message
  } else {
    console.log(size);
    this.errMessage = false;
    //show OK string message
  }
}

然后在您的模板中，只需将错误消息包装在div中：

<div *ngIf="x.clicked">
  <p *ngIf="selectSizeCtrl.value == '0' && !!xdMessage "> 
      Select a size! Error Message! 
  </p>
</div>

你的分叉

如何仅在用户在ngular Angular2中单击的元素上显示错误消息

2 个答案:

Plunker