Я использую Angular7 для получения конечных точек от Laravel API. Я отображаю результат на столе в Angular. Конкретное поле с именем is_subscribe (Subscribe) имеет значение 1 или 0. Я не знаю, как изменить 1 на True и 0 на False
Я написал service.ts, component.ts и component.html и все работает нормально.
model.ts
export class Cloudsubscriptions {
constructor(
public _id: number = 0,
public msisdn: string,
public is_subscribe: number,
public package_id: number,
public transaction_id: string,
public platform_transaction_id: number,
public status: string,
public amount: string,
public transaction_type: string,
public channel: string,
public service_name: string
) {}
toString(): string {
return JSON.stringify(this)
}
}
service.ts
const httpOptions = {
headers: new HttpHeaders({'Content-Type': 'application/json'})
};
const apiUrl = "http://localhost/cloudengine-sandbox/cloudsandboxbackend/public/api/cloudsubscriptions";
@Injectable({
providedIn: 'root'
})
export class CloudsubscriptionsService {
constructor(private http: HttpClient) { }
getCloudsubscriptions (): Observable<Cloudsubscriptions[]> {
return this.http.get<Cloudsubscriptions[]>(apiUrl)
.pipe(
tap(cloudsubscriptions => console.log('Fetch Cloud subscriptions')),
catchError(this.handleError('getCloudsubscriptions', []))
);
}
getCloudsubscription(id: number): Observable<Cloudsubscriptions> {
const url = `${apiUrl}/${id}`;
return this.http.get<Cloudsubscriptions>(url).pipe(
tap(_ => console.log(`fetched Cloudsubscription id=${id}`)),
catchError(this.handleError<Cloudsubscriptions>(`getCloudsubscription id=${id}`))
);
}
component.ts
export class PremiumSmsProductListComponent implements OnInit {
displayedColumns: string[] = ['msisdn','is_subscribe','package_id','status','amount','channel','service_name'];
data: Cloudsubscriptions[] = [];
isLoadingResults = true;
constructor(private api: CloudsubscriptionsService) { }
ngOnInit() {
this.api.getCloudsubscriptions()
.subscribe(res => {
this.data = res;
console.log(this.data);
this.isLoadingResults = false;
}, err => {
console.log(err);
this.isLoadingResults = false;
});
component.html
<div class="box-body">
<table id="example2" class="table table-bordered table-hover table-striped table-condesed">
<thead>
<tr>
<th width="5%">#</th>
<th>MSISDN</th>
<th>Subscribe</th>
<th>Package</th>
<th>Status</th>
<th>Amount</th>
<th>Channel</th>
<th>Service Name</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let datas of data| filter:filter | paginate: { itemsPerPage: 5, currentPage: p }; let i = index">
<td>{{i + 1}}</td>
<td>{{datas.msisdn}}</td>
<td>{{datas.is_subscribe}}</td>
<td>{{datas.package_id}}</td>
<td>{{datas.status}}</td>
<td>{{datas.amount}}</td>
<td>{{datas.status}}</td>
<td>{{datas.amount}}</td>
<td>
<!-- <button class="btn btn-info" (click)="updateService(service)">Edit</button> -->
<button class="btn btn-info" routerLink="/cloudsubscriptionsupdate/{{channel}}">Edit</button>
<button class="btn btn-danger" (click)="deleteCloudsubscription(service)" style="margin-left: 20px;"> Delete</button>
</td>
</tr>
</tbody>
</table>
<pagination-controls (pageChange)="p = $event"></pagination-controls>
</div>
Я хочу
{{}} datas.is_subscribe
- Истина, когда 1, и Ложь, когда 0
.