<form #userForm="ngForm" (ngSubmit)="onSubmit(userForm)" style="background-color:#F4F6F7;border:1px solid black">
<fieldset>
<md-radio-group class="pull-left" style="margin:10px">
<md-radio-button #ship style="font-size:13px">Pickup in the store!</md-radio-button><br>
<table>
<tr>
<span style="font-size:10px;margin:25px">(Ready in as little as 1 hour)</span></tr>
<tr>
<select placeholder="Pick here" *ngIf="ship.checked" style="margin-left:25px;width:100%">
<option *ngFor="let data of objArray" [value]="data">
{{ data}}
</option>
</select>
</tr>
</table>
<br>
<md-radio-button #ship1 value="true2" style="font-size:13px">Ship</md-radio-button><br>
<table>
<tr> <span style="font-size:10px;margin:25px">(3-5 Business Days)</span></tr>
<tr><select placeholder="Pick here" *ngIf="ship1.checked" style="margin-left:25px">
<option *ngFor="let data of objArray" [value]="data">
{{ data}}
</option>
</select></tr>
</table>
<br>
<md-radio-button #ship2 style="font-size:13px">Schedule a Delivery</md-radio-button><br>
<table>
<tr> <span style="font-size:10px;margin:25px">(Enter 5 digit ZIP code of the delivery address)</span></tr>
<tr>
<md-form-field class="example-full-width" *ngIf="ship2.checked" style="margin-left:25px"> <input mdInput placeholder="ZIP code" name="zipcode"></md-form-field><br></tr>
</table>
<br>
</md-radio-group>
<br>
</fieldset>
</form>
我在电子商务网站工作。在这里我需要显示一个包含3个单选按钮的模态。在选择单选按钮时，应该出现关于该单选按钮的选项。我在ngIf条件下使用了单选按钮值。但它没有工作，选择选项出现而没有选择单选按钮。 以下是我的代码：
import { Component, OnInit } from '@angular/core';
import {Http,Response,Headers, RequestOptions} from '@angular/http';
import { Router} from '@angular/router';
import * as _ from "lodash";
import { PaginationService } from '../../pagination.service';
import { WooApiService } from 'ng2woo';
import { NgForm } from '@angular/forms';
import {
ReactiveFormsModule,
FormsModule,
FormGroup,
FormControl,
Validators,
FormBuilder,
} from '@angular/forms';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
public productsList=[];
public productArr=[];
public objArray: Array<string> = ["Albania", "Andorra", "Armenia", "Austria", "Azerbaijan"];
total:any;
currentPage:Number;
constructor(private http:Http,private router:Router,private woo: WooApiService) {
}
createAuthorizationHeader(headers: Headers) {
headers.append('Authorization', 'Basic ' +
btoa('ck_543700d9f8c08268d75d3efefb302df4fad70a8f:cs_f1514261bbe154d662eb5053880d40518367c901'));
headers.append("Content-Type", "application/json");
}
getData(){
let headers = new Headers();
this.createAuthorizationHeader(headers);
return this.http.get("https://www.colourssoftware.com/wordpress/wp-json/wc/v2/products?page=1&per_page=10",{
headers:headers
})
.subscribe(data => {
const products=data.json();
console.log(data.headers);
this.total = data.headers.get('X-WP-TotalPages');
console.log("Pages ",this.total);
for( var i=1;i<=this.total;i++){
console.log("hello "+this.total);
this.getProducts(i);
}
console.log("hello"+JSON.stringify(this.productsList));
this.dataArr();
},
err => {
console.log("Error!: ",err);
}
);
}
getProducts(i){
this.currentPage=i;
console.log("cpage "+this.currentPage);
let headers = new Headers();
this.createAuthorizationHeader(headers);
return this.http.get("https://www.colourssoftware.com/wordpress/wp-json/wc/v2/products?per_page=10&page="+this.currentPage,{
headers:headers
})
.subscribe(data => {
const products = data.json();
this.productsList.push(data.json());
console.log("hello"+JSON.stringify(this.productsList));
},
err => {
console.log("Error!: ",err);
}
);
}
dataArr(){
console.log("array"+this.productsList.length);
for(var i=0;i<this.productsList.length;i++){
this.productArr.push(this.productsList[i]);
console.log("arr"+this.productArr);
}
}
ngOnInit() {
this.getData();
}
} <form #userForm="ngForm" (ngSubmit)="onSubmit(userForm)" style="background-color:#F4F6F7;border:1px solid black">
<fieldset>
<md-radio-group class="pull-left" style="margin:10px">
<md-radio-button [(ngModel)]="store" name="store" value="true1" style="font-size:13px">Pickup in the store!</md-radio-button><br>
<span style="font-size:10px;margin:25px">(Ready in as little as 1 hour)</span><br>
<select placeholder="Pick here" *ngIf="store==true1">
<option *ngFor="let data of objArray" [value]="data" style="z-index:1">
{{ data}}
</option>
</select>
<md-radio-button [(ngModel)]="ship" name="ship" value="true2" style="font-size:13px">Ship</md-radio-button><br>
<span style="font-size:10px;margin:25px">(3-5 Business Days)</span>
<select placeholder="Pick here" *ngIf="ship==true2">
<option *ngFor="let data of objArray" [value]="data" style="z-index:1">
{{ data}}
</option>
</select>
<br>
<md-radio-button [(ngModel)]="delivery" name="delivery" value="true3" style="font-size:13px">Schedule a Delivery</md-radio-button><br>
<span style="font-size:10px;margin:25px">(Enter 5 digit ZIP code of the delivery address)</span>
<br>
<md-form-field class="example-full-width" *ngIf="delivery==true3"> <input mdInput placeholder="ZIP code" name="zipcode"></md-form-field><br>
</md-radio-group>
<br>
为什么ngIf不起作用？我在哪里做错了？
答案 0 :(得分：2)
不要执行此[(ngModel)]="ship" name="ship" value="true2"，而是将<md-radio-button>作为身份证明，例如#ship。您可以在ship.checked中查看*ngIf，如下所示：
<md-radio-button #ship style="font-size:13px">Ship</md-radio-button><br>
<span style="font-size:10px;margin:25px">(3-5 Business Days)</span>
<select placeholder="Pick here" *ngIf="ship.checked">
<option *ngFor="let data of objArray" [value]="data" style="z-index:1">
{{ data}}
</option>
</select>
同样对其他单选按钮也一样。链接到stackblitz demo。