我想取輸入值，即它的城市名稱。然后添加 URL (this.cityNameSearch) 字串。但它不起作用。如何在其檔案中使用輸入值？
post.component.ts
import { HttpClient } from '@angular/common/http';
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-posts',
templateUrl: './posts.component.html',
styleUrls: ['./posts.component.css']
})
export class PostsComponent {
@Input() cityNameSearch:string;
apikey:string = 'f2b412c0e169b2dbc28e13691fc4566b'
url = 'https://api.openweathermap.org/data/2.5/forecast?q=' this.cityNameSearch '&appid=' this.apikey;
posts;
ngOnInit() {
}
constructor(private http: HttpClient) {
http.get(this.url).subscribe(response => {
this.posts = response;
console.log(this.posts)
console.log(this._categoryId)
})
}
}
app.component.ts
import { Component, } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
cityname:string;
onSubmit(){
console.log(this.cityname);
}
}
應用程式組件.html
<form (submit) = "onSubmit()">
<input type="text" name="cityname" placeholder="City Name" [(ngModel)]="cityname">
<i class="fas fa-search-location"></i>
</form>
<app-posts [cityNameSearch]="cityname"></app-posts>
uj5u.com熱心網友回復：
您是否嘗試過在 app-post 上使用 *ngIf 來觸發組件，
<form (submit)="onSubmit()">
<input
type="text"
name="cityname"
placeholder="City Name"
[(ngModel)]="cityname"
/>
<i class="fas fa-search-location"></i>
</form>
<button (click)="onclear()">clear</button>
<app-post *ngIf="hidden" [cityNameSearch]="cityname"></app-post>
這是示例樣本
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/360628.html